七、监听事件

一、addListener方法

this.addEvents("rowselect") ;;//绑定事件

 

二、ExtJS支持的自定义事件

this.fireEvent("rowselect",_record);//激发自定义事件第二个参数是返回数据， 只有出发了该事件后，会自动处理object.on("active",function(data){},otherObject)

三、触发监听事件

object.on("active",function(data){},otherObject);//自身触发时间获取数据data并交给otherObject对象处理（被动）

 

实例

PersonListGridPanel1显示表格数据，通过添加监听将数据抛出，自身进行触发并将需要的对象PersonViewFormPanel1添加进来处理抛出的数据显示到PersonViewFormPanel1面板中

PersonListGridPanel1.js

PersonListGridPanel1=Ext.extend(Ext.grid.GridPanel,{
    constructor:function(){
        PersonListGridPanel1.superclass.constructor.call(this,{
                renderTo:Ext.getBody(),
                height:200,
                width:350,
                enableColumnMove :false,//禁止调整移动表格顺序
                colModel : new Ext.grid.ColumnModel([{
                            header : "姓名",
                            width: 120,
                            align:"center",
                            menuDisabled :true //去除锁定箭头(用于取消显示字段)
                        },{
                            header:"性别",width: 180,
                            menuDisabled :true
                        },{
                            header:"年龄",
                            sortable: true,
                            menuDisabled :true
                        }]),
                        store : new Ext.data.JsonStore({
                            data:[{name:"网易",age:28,sex:"男"},{name:"网易2",age:23,sex:"男"},{name:"网易3",age:29,sex:"男"}],
                            fields:["name","age","sex"]
                        }),
                        selModel :new Ext.grid.RowSelectionModel({
                             singleSelect:true,//不允许多选
                             listeners:{
                                        "rowselect":function(_sm , _index , _record){
                                                    this.fireEvent("rowselect",_record);    
                                                    console.info(_record);
//                                                    Ext.getCmp("view_form").getForm().loadRecord(_record) ;//将选中数据载入到form中
                                            },
                                            scope:this
                                        }
                         }) 
        });
        
        this.addEvents("rowselect") ;
    }
});

 

PersonViewFormPanel1.js

PersonViewFormPanel1=Ext.extend(Ext.form.FormPanel,{
    constructor:function(){
        PersonViewFormPanel1.superclass.constructor.call(
            this,{
                renderTo:Ext.getBody(),
                width:350,
                labelWidth:45,
                frame:true,
                defaultType:"textfield",
                defaults:{readOnly:false,anchor:"98%"},
                items:[{
                    fieldLabel:"姓名",
                    name:"name"
                },{
                    fieldLabel:"年龄",
                    name:"age"
                },{
                    fieldLabel:"性别",
                    name:"sex"
                }]
            }
        )
    },
    loadRecord:function(_r){
        this.getForm().loadRecord(_r);//form加载record数据
    }
    
});

 

 调用

Ext.onReady(function(){
    var form=new PersonViewFormPanel1();
    var grid=new PersonListGridPanel1();
    grid.on("rowselect",function(record){
        this.loadRecord(record);//调用form的loadRecord自定义方法
    },form);
});

 

 总结：

当一个对象需要将自身数据传给另一对象时，通过自身添加监听事件进行处理