Extjs关于添加展开和收缩事件的监听

公司框架用Extjs又封装了一层，时不时会添加行间js,会给元素添加行内样式，用得实在是不方便。

最近用到Extjs的fieldSet标签。公司框架自己封装了之后，连一些该有的事件都没了。

因为公司框架是标签之后自动添加Ext.js函数的,没有监听事件，只能自己Ext.onReady(function{});函数中添加fieldSet标签的展开和收缩事件，其实我这边就是监听fieldset的扩展和收缩适当调节其下方表格的高度。

function initGrid2Height(){
    if(document.body.clientHeight!='undifend'){
        var grid3 = Ext.getCmp('grid3');
        if(grid3!=null){
            grid3.setHeight(document.all.d2.clientHeight-document.all.buyQueryDate_panel.clientHeight-document.all.boxs1.clientHeight-6);
            grid3.getView().refresh();
        }
    }
}

Ext.onReady(function(){
        var boxs1 = Ext.getCmp('boxs1');//获取fieldSet元素
        if(document.body.clientHeight!='undifend'){
            boxs1.on('collapse',initGrid2Height);//添加收缩监听事件
            boxs1.on('expand',initGrid2Height);//添加扩展监听事件
        }

}）;

查看中文API,

其中这个eventName,需要这个元素有这个函数。

addListener( String eventName, Function fn, Object scope, Object options ) 加入一个事件处理函数。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.

 

on( String eventName, Function handler, Object scope, Object options ) 为该元素添加事件处理函数（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)

可选的就是这个参数可写可不写，这个函数可以写成on( String eventName, Function handler)或on( String eventName, Function handler, Object scope）或on( String eventName, Function handler, Object scope, Object options )

collapse() 当面板被闭合后触发。Fires after the Panel has been collapsed.

 

expand() 当面板被展开后触发。Fires after the Panel has been expanded.