由于工作和个人的原因已经有一段事件没有学习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) {
``````````````
}
});
5494
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
