extjs学习--事件机制
由于工作和个人的原因已经有一段事件没有学习extjs了,这两天重新开始。
可能是我真的太愚笨了,花了一天的时间才把extjs的事件机制大体上弄明白了,但还很肤浅。
1.浏览器的事件机制--事件就是一个对象发生的事
浏览器的事件机制有两种模型。
第一种是最基本的原始时间模型。如:将嵌入处理代码到HTML标签,和赋值到元素的事件属性中进行注册事件的处理工作。在这种模型中,每个事件只能注册一个处理函数,作用域是其运行的对象。
第二种是标准模型,采用addEventListner为元素增加时间处理函数。注册函数 作用域和不再是当前运行的对象,而是定义它的对象。
2.extjs的事件机制
第一步:定义对象(A容器),所有继承自ext.util.Observable类的控件都支持事件。
第二步:为这些继承了ext.util.Observable的对象定义一些事件,如用addEvent(E1);
第三步:为这些事件配置监听器(如用on来添加事件监听器),当某个事件被触发(fireEvent)时,extjs会自动调用相应的注册函数。
一般来说,为这些事件配置的监听器都在另一个容器(B容器)里。
假设A容器在定义时定义了事件E1(addEvent(E1)),定义B容器时,A容器是B容器的一个成员,此时需要在B容器里为它的成员A配置E1的监听器
(this.A.on("E1",functionE1)),并为E1事件注册函数functionE1。当B容器监听到其成员A触发事件E1(fireEvent(E1)),则调用其注册函数functionE1。
以下是个小例子,每个类里没有任何的配置属性,也没有任何初始化。
//商品查询窗体 ProductsSearchGridPanel = Ext.extend(Ext.grid.GridPanel, { //下面两个事件是将本GridPanel选中的商品添加到上层的GridPanel,但此时的ProductsSearchGridPanel只是处于定义的状态并未是上层的一个成员, //因为涉及另一个类的操作,所以在这个类定义时需要增添此事件,但在另一个类必须要对该事件进行监听。 this.addEvents('selectRecord'); this.addEvents('unselectRecord'); this.addEvents('submit'); columns: [ { handler: this.onClickAddBtn, scope: this, handler: this.onClickDelBtn, scope: this }], onClickAddBtn: function (_grid, _rowIndex, _colIndex) { ~~~~~~~~~~~~~~~~~~~~ this.fireEvent('selectRecord', _data); //将记录转换成Record类型后触发selectRecord事件 }, onClickDelBtn: function (_grid, _rowIndex, _colIndex) { ````````````````````````````` this.fireEvent('unselectRecord', _r); //将记录转换成Record类型后触发unselectRecord事件 }, }); //选择产品到入库窗体 SelectItemToInStockWindow = Ext.extend(Ext.Window, { selectGrid: null, //入库明细-查询 this.selectGrid = new ProductsSearchGridPanel(); SelectItemToInStockWindow.superclass.constructor.call(this, { items: [this.selectGrid], buttons: [ { text: '关闭', handler: this.onCloseClick, scope: this } ], }); //窗体关闭事件 onCloseClick: function () { this.hide(); } }); /***********************************************************************/ //入库明细表格 InStockItemsGridPanel = Ext.extend(Ext.grid.EditorGridPanel, { //成员有selectWin,selectWin里有ProductsSearchGridPanel这个成员 selectWin: null, constructor: function () { //窗体-明细产品选择窗口 this.selectWin = new SelectItemToInStockWindow(); //在InStockItemsGridPanel里监听其成员ProductsSearchGridPanel是否触发了事件selectRecord //若成员ProductsSearchGridPanel触发了事件selectRecord,即调用事件的函数addSelectToStroe this.selectWin.selectGrid.on('selectRecord', this.addSelectToStroe, this); //在InStockItemsGridPanel里监听其成员ProductsSearchGridPanel是否触发了事件addSelectToStroe //若成员ProductsSearchGridPanel触发了事件unselectRecord,即调用事件的函数removeRecoreFromStroe this.selectWin.selectGrid.on('unselectRecord', this.removeRecoreFromStroe, this); InStockItemsGridPanel.superclass.constructor.call(this, { title: '入库明细', tbar: [ { text: '添加入库单明细', handler: function () { this.selectWin.show(); }, scope: this }, '-', { text: '删除入库单明细', handler: this.removeInStockItem, scope: this }, '-', { text: '保存入库单修改', handler: this.saveInStockItem, scope: this }, '-' ], }); }, //当在选择商品的窗体选择产品时触发 addSelectToStroe: function (_r) { ````````````` }); }, //当在选择商品的窗体关闭选择产品时触发 removeRecoreFromStroe: function (_r) { ``````````````` }, //称除入库明细 removeInStockItem: function () { `````````````````` }, //保顾虑入库明细的修改 saveInStockItem: function () { this.getStore().commitChanges(); } }); //入库单的提交表单 InStockBaseInfoInsFormPanel = Ext.extend(Ext.form.FormPanel, { itemsGrid: null, wareHouse: null, constructor: function (_cfg) { this.addEvents('formSubmit');//添加formSubmit事件,当数据提交时在window窗体用 this.addEvents('formCancel');//添加formCancel事件,当数据在window窗体关闭时用 //选择列表-入库间产品详细信息 this.itemsGrid = new InStockItemsGridPanel(); //仓库下拉选择框 InStockBaseInfoInsFormPanel.superclass.constructor.call(this, { buttons: [ { text: '确定', handler: this.onSubmitClick, scope: this }, { text: '关闭', handler: this.onCancelClick, scope: this } ], }); }, //点击表单里的关闭按钮触发事件formCancel onCancelClick: function () { ``````````````````````` this.fireEvent('formCancel'); }, //点表单里的确定按钮处理程序 onSubmitClick: function () { ````````````````````````````````````````````` //触发-窗体提交事件并把数据传出 this.fireEvent('formSubmit', _r); } }); //添加入库单的TabPanel InStockInsFormTabPanel = Ext.extend(Ext.TabPanel, { baseInfoForm: null, constructor: function () { this.addEvents('submitCancel');//添加submitCancel事件,当提交取消用 this.addEvents('submitBaseInfo');//添加submitBaseInfo事件,当提交时用 this.baseInfoForm = new InStockBaseInfoInsFormPanel(); //监听InStockInsFormTabPanel类成员baseInfoForm是否触发formCancel事件 this.baseInfoForm.on('formCancel', this.onSubmitCancel, this); //监听InStockInsFormTabPanel类成员baseInfoForm是否触发formSubmit事件 this.baseInfoForm.on('formSubmit', this.onBaseInfoSubmit, this) //窗体取消后触发 onSubmitCancel: function () { //触发-面板关闭事件 this.fireEvent('submitCancel'); }, //窗体提交后触发 onBaseInfoSubmit: function (_r) { //触发-数据提交事件并把参数传出 this.fireEvent('submitBaseInfo', _r); } } }); //入库单插入窗体 InStockInsInfoWindow = Ext.extend(Ext.Window, { tabforms: null, constructor: function (_cfg) { this.tabforms = new InStockInsFormTabPanel(); //添加insInStockSuccess事件:入库单插入成功后同步写入主Panel列表时用 this.addEvents('insInStockSuccess'); //监听InStockInsInfoWindow类成员tabforms是否触发submitCancel事件 this.tabforms.on('submitCancel', this.onCancelClick, this); //监听InStockInsInfoWindow类成员tabforms是否触发submitBaseInfo事件 this.tabforms.on('submitBaseInfo', this.onBaseInfoSubmit, this); }, //提交数据成功后触发 onBaseInfoSubmit: function (_r) { this.fireEvent('insInStockSuccess', _r); }, //取消提交数据时触发 onCancelClick: function () { this.hide(); } }); //主面板 InStockListGridPanel = Ext.extend(Ext.grid.GridPanel, { inStockInsInfoWin: null, constructor: function () { //窗体-添加入库单 this.inStockInsInfoWin = new InStockInsInfoWindow(); //监听InStockListGridPanel类里的成员inStockInsInfoWin是否触发insInStockSuccess事件 this.inStockInsInfoWin.on('insInStockSuccess', this.afterInsertInStock, this); //查询前添加参数的作用 this["store"].on('beforeload', this.onLoadAddParam, this); //入库单明细下拉列表数据 InStockListGridPanel.superclass.constructor.call(this, { title: '入库管理', tbar: [ { text: '入库', handler: function () { this.inStockInsInfoWin.show(); }, scope: this }, '-', { text: '修改', handler: function () { this.onClickUpdateInstock(); }, scope: this }, '-' ], }); }, //查询时添加参数 onLoadAddParam: function () { this["store"].baseParams = { inStockNo: this.tbarSearch.items.item('inStockNo').getValue(), wareHouseId: this.SwareHouse.getValue(), sDate: Ext.util.Format.date(this.tbarSearch.items.item('sDate').getValue(), 'Y-m-d'), eDate: Ext.util.Format.date(this.tbarSearch.items.item('eDate').getValue(), 'Y-m-d') } }, //点击修改入库单按钮 onClickUpdateInstock: function () { `````````````` }, //入库单更新数据成功后执行 afterUpdateInStock: function (_r) { ````````` }, //入库单添加成功后执行 afterInsertInStock: function (_r) { `````````````` } });