Extjs 使用 checkboxgroup 时无法获取到 group 中控件的问题

配置如下:

{
	fieldLabel: '角色选择',
	xtype: 'checkboxgroup',
	items: [
		{boxLabel: '测试1', name: 'f1'},
		{boxLabel: '测试2', name: 'f1'},
		{boxLabel: '测试3', name: 'f3'}
	]
}

然后用 formPanel.getForm().findField(‘f1’) 获取控件 f1,返回为 null。
我用的是 Ext 3.2,好像 Ext 2 也有这个问题。

解决方法:
给 Ext 打个补丁:

Ext.override(Ext.form.BasicForm, {

    findField : function(id){
        var field = this.items.get(id);

        if(!field){
            // --------- It was: ---------
            // //Iterate through children on first level
            // this.items.each(function(f){
            //     if(f.isFormField && (f.dataIndex == id || f.id == id || f.getName() == id)){
            //         field = f;
            //         return false;
            //     }
            // });

            // --------- It is now: ---------
            // Iterate through children on all levels
            var fn = function(f) {
              if(field)
                return false;   //stop iteration, if field was found already

              if(f.isFormField && (f.dataIndex == id || f.id == id || f.getName() == id)){
                field = f;    // field was found
                return false;
              }
              else if(f.items) {
                f.items.each(fn);   // iterate through child items
              }
            }
            this.items.each(fn);
            // --------- End of my changes ---------

        }

        return field || null;
    }

});

参考这里:
http://www.extjs.com/forum/showthread.php?44199-2.2-CheckboxGroup-Struggling-with-item-search&p=209958

— EOF —

Ext 2.1 框架浏览(三):常用操作

第三部分:常用操作

常用操作,也是最基本的操作。

定义在 Ext.js 中。

属性:

String BLANK_IMAGE_URL

返回一个 1×1 的透明 gif 图片的 URL

String SSL_SECURE_URL

一个指向空文件的 URL,防止 IE 弹出内容安全警告。默认为 javascript:false。

Function emptyFn

空函数。

Boolean enableGarbageCollector

是否自动定期清理 Ext.Elements,默认为 true。

Boolean eanbleListenerCollection

清理一个 element 后是否自动清除相关的事件侦听(只在 enableGarbageCollector 为 true 时发生),默认为 false。

Boolean isAir

Boolean isBorderBox

Boolean isGecko

Boolean isIE

Boolean isIE6

Boolean isIE7

Boolean isOpera

Boolean isSafari

Boolean isSafari2

Boolean isSafari3

Boolean isWindows

Boolean isLinux

Boolean isMac

Boolean isReady

当文档加载完全并准备 action 时,值为 true。

Boolean isSecure

页面是否通过 SSL 访问。

Boolean isStrict

浏览器是否为 strict 模式。

Boolean useShims

默认情况下,Ext 会自动决定是否填充浮动的元素。

如果使用 Flash,需要把它设置为 true。

方法:

void addBehaviors(Object obj)

在使用选择器选择的元素上应用事件监听,事件名以 @ 开始。如:

Ext.addBehaviors({

    ‘#foo a, #bar span@click’ :   function(e, t){ alert(‘test’); }

});

Object apply(Object obj, Object config, Object defaults)

拷贝对象 config 的所有属性到对象 obj,返回 obj。

如果设置了 defaults,那么在拷贝时会根据 defaults 拷贝属性的默认值。

Object applyIf(Object obj, Object config)

拷贝对象 config 中对象 obj 不存在的所有属性到对象 obj,返回 obj。

Object decode(String json)

Ext.util.JSON.decode 的缩写。

void destroy(Mixed arg1, [Mixed arg2], [Mixed etc…])

销毁任意一个对象,包括该对象的所有事件侦听器,对象可以是 Ext.Element 或 Ext.Component。

void each(Array/NodeList/Mixed array, Function fn, object scope)

在传入数组的所有对象上遍历调用函数 fn,当 fn 返回 false 时停止遍历。

调用的函数形式为:fn(Object item, Number index, Array allItems)

String encode(Mixed o)

Ext.util.JSON.encode 的缩写。

String escapeRe(String str)

转义输入的字符串,用于正则表达式。

Function extend(Function subclass, Function superclass, [Object overrides])

扩展类,subclass 为子类,superclass 为父类,overrides 是要覆盖的属性。

Function fly(String/HTMLElement el, [String named])

Ext.Element.fly 的缩写。返回一个全局共享的享元元素,并将指定的节点做为活动元素。

fly 不太好理解,附上一段英文解说:

Ext.Element wraps a lot of functionality around DOM element/node, for example functions like hide, show, all animation stuff, dimensions getting and setting function and a lot more.

Ext.Element keeps reference to DOM element it is wrapped around in dom property. Once you have an Ext.Element (e.g. you call Ext.get(‘some-id’) it is an instance of Element class and you can work with it as such.

Now, imagine that you need to hide 1000 DOM nodes, you call 1000 times Ext.get(‘some-one-of-1000-id’).hide() so you create 1000 instances of Element just to call one function: hide.

Ext.fly is one instance of Ext.Element with "replaceable" DOM node it is wrapped around. If you call 1000 times Ext.fly(‘some-one-of-1000-id’).hide() you 1000 times replace dom property of one instance of Ext.Element.

Result: higher performance, lower memory usage.

You only need to keep in mind that you cannot keep Element returned by Ext.fly for later use as it’s dom will sooner or later gets replaced by another one.

Element get(Mixed el)

Ext.Element.get 的缩写,用于取得一个 Element 对象。

el 可以是 id,一个 DOM 节点或一个存在的节点。

Element getBody()

返回当前文档对象的 body 节点元素。

Component getCmp(String id)

Ext.ComponentMgr.get 的缩写,根据 id 返回一个组件对象。

Element getDoc()

返回当前文档对象(document object)的节点元素。

HTMLElement getDom(Mixed el)

返回指定的 DOM 节点对象。

String id([Mixed el], [String prefix])

产生不重复的 id,如果元素已有 id,则不变化。

Boolean isArray(Object The)

测试输入的对象是否是 JavaScript 数组。

Boolean isDate(Object The)

测试输入的对象是否是 JavaScript 时间对象。

Boolean isEmpty(Mixed value, [Boolean allowBlank])

测试输入的值是否为 null、undefined 或空字符串(当 allowBlank 取 false 时)。

void namespace(String namespace1, String namespace2, String etc)

建立名称空间,以限定变量和类的作用域。

Number num(Mixed value, Number defaultValue)

判断一个值是否是数字,是则返回 value,如果不是返回默认值 defautlValue。

void onReady(Function fn, Object scope, boolean override)

Ext.EventManager.onDocumentReady 的缩写。文档准备好(在 onload 和图片加载完之前)后执行指定函数。

void override(Object origclass, Object overrides)

在指定 class 的 prototype 中增加一个函数列表,覆盖任何已经存在的同名函数。

Array query(String path, [Node root])

Ext.DomQuery.select 的缩写。利用 CSS/XPath 选择器,选择并返回一个 DOM 节点数组。

void reg(String xtype, Constructor cls)

Ext.ComponentMgr.registerType 的缩写。用于注册新的组件。

void removeNode(HTMLElement Node)

从文档中删除一个 DOM 结点,如果传入 body 结点将被忽略。

CompositeElementLite/CompositeElement select(String/Array selector, [Boolean unique], [HTMLElement/String root])

利用 CSS 选择器选择并返回元素。

String type(Mixed object)

返回对象的类型,如果为 null 或 undefined,则返回 false。

类型有:string, number, boolean, function, object, array, regexp, element, nodelist, textnode, whitespace。

Object urlDecode(String string, [Boolean overwrite])

解码一个编码过的 URL,并将它转换成对象。如:

Ext.urlDecode("foo=1&bar=2&bar=3&bar=4");

将返回 {foo: 1, bar: [2, 3, 4]}。

overwrite 表示默认为 false,为 true 时将会覆盖对象中同名的属性值。

String urlEncode(Object o)

将一个对象转换成编码过的 URL。

 

— EOF —

Ext 2.1 框架浏览(二):时间日期处理

第二部分:时间日期处理

定义于 Date.js。

Date 类

------

属性:

把这些属性用 document.write 输出,前面几个用大写的是单位,后面的是星期和月份的名称,最后一个比较奇怪。

要汉化时改一下这几个属性的值应该就可以了。

String Date.DAY

d

String Date.HOUR

h

String Date.MILLI

ms

String Date.MINUTE

mi

String Date.MONTH

mo

String Date.SECOND

s

String Date.YEAR

y

Array Date.dayNames

Sunday,Monday,Tuesday,Wednesday,Thursday,Friday,Saturday

Object Date.formatCodes

[object Object]

可以自定义日期格式,如:Date.formatCodes.x = "String.leftPad(this.getDate(), 2, ‘0’)";

Array Date.monthNames

January,February,March,April,May,June,July,August,September,October,November,December

Object Date.monthNumbers

[object Object]

这是一个 Hash 数组,键为月份名缩写(如 Jul),值为月份序号,从 0 开始。

方法:

Number Date.getMonthNumber(String name)

根据缩写的或完整的月份名称,取得从 0 开始的月份序号。

String Date.getShortDayNum(Number day)

根据输入的星期几序号(由 0 开始),取得星期几的缩写(第一天是 Sunday)。

String Date.getShortMonthName(Number month)

根据输入的月份序号(由 0 开始),取得月份的缩写。

Date Date.parseDate(String input, String format)

根据指定格式 format 分析传入的时间字符串,返回一个 Date 对象。

Date add(String interval, Number value)

按指定时间单位 interval 增加或减少时间编移。

Boolean between(Date start, Date end)

判断当前时间是否在两个时间之间。

Date clearTime(Boolean clone)

清空当前时间对象中的所有时间信息。

clone 默认为 false,为 true 时返回当前时间对象的克隆。

Date clone()

返回一个时间对象的精确克隆。

String format(String format)

根据指定格式,格式化返回时间字符串。

Number getDayOfYear()

取得当前时间对象在一年中天的序号,0-364(闰年0-365)。

Number getDaysInMonth()

取得当月的天数。

Number getElapse([Date date])

返回当前时间对象距指定时间的微秒数,date 为空,则默认为 now。

Date getFirstDateOfMonth()

返回当前时间对象所在月份第一天的时间对象。

Number getFirstDayOfMonth()

取得当前时间对象所在月份的第一天是星期几(0-6)。

String getGMTOffset(Boolean colon)

返回时区偏移字符串,格式如:’+0800’。

colon 默认为 false,取 true 时会在小时和分钟之间加上冒号。

Date getLastDateOfMonth()

返回当前时间对象所在月份中最后一天的时间对象。

Number getLastDayOfMonth()

取得当前时间对象所在月份的最后一天是星期几(0-6)。

String getSuffix()

取得当前时间对象中天的英文序数后缀,返回值为 ‘st’, ‘nd’, ‘rd’ 或 ‘th’。

String getTimezone()

取得时区名,如 ‘CST’, ‘PDT’, ‘EDT’ 等。

Number getWeekOfYear()

返回当前时间对象处于一年中的第几周(1-53)。

Boolean isLeapYear()

判断当前时间对象是否处在闰年。

 

— EOF —

Ext 2.1 框架浏览(一):Ext 基本类

第一部分:Ext 基本类

Ext 核心中定义了一些常用的工具和函数。

定义在 Ext.js 中

Number 类

------

Number constrain(Number min, Number max)

使数值在 min 和 max 之间。

如果超过范围,则返回 min 或 max,否则返回原值。

String 类

------

String escape(String string)

转义字符串中的单引号 ‘  和反斜杠 \ 。

String format(String format, String value1, String value2, …)

以指定格式格式化返回字符串。

String leftPad(String string, Number size, [String char])

使用指定字符 char,补齐字符串到指定长度 size,如果不指定 char,则默认为空格。

String toggle(String value, String other)

使字符串值在指定的两个字符串间交替。

String trim()

去除字符串两端的空格。

Array 类

------

Number indexOf(Object o)

检查指定对象是否在数组中存在。

存在时返回数组下标,不存在时返回 -1。

Array remove(Object o)

从数组中移除指定对象(只移除第一次出现的)。

Function 类

------

Function createCallback()

建立一个回调函数,可传入参数,如:

myFunction.createCallback(myarg, myarg2)

将建立一个绑定两个参数的函数。

Function createDelegate([Object obj], [Array args], [Boolean/Number appendArgs])

建立一个作用于对象 obj 上的委托/回调函数,如:

this.myFunction.createDelegate(this)

将建立一个作用于 this 的函数。

appendArgs 参数指定参数插入方式:

为 true 表示追加到原有参数之后,为 false 表示覆盖原有参数,为数字表示插入到原有参数的指定位置。

Function createInterceptor(Function fcn, [Object scope])

创建一个带拦截器 fcn 的函数,如果拦截器 fcn 返回 false,则原始函数被拦截。scope 为拦截器 fcn 的作用域,默认为原始函数的作用域。

Function createSequence(Function fcn, [Object scope])

创建一个序列函数,该函数会先执行 fcn,再执行原始函数。

Function defer(Number millis, [Object obj], [Array args], [Boolean/Number appendArgs])

在 millis 毫秒后执行函数,其余参数说明同 createDelegate。

返回 timeout id,可以用 clearTimeout 进行清除。

 

— EOF —