ExtJs事件的传递
在ExtJs开发中，做一个控件，他有一个主界面的panel类（其他开发人员可见），这个主界面由定义好的其他类（这些类其他开发人员不用关心）组成，那么其他类上的一些表格单击事件、button单击事件，就需要由最外层控件监听，此时可以把内部控件的事件，传递到外层panel类来监听。
这个类是暴露给其他人的主界面类BillLayout.js
Ext.define('shinow.drug.common.layout.BillLayout', {
extend : 'Ext.panel.Panel',
requires : ['drug.common.layout.BillContainer'],
alias : 'widget.BillLayout',
border : false,
layout : 'fit',
billTitle : '',// 单据标题
billTop : {},// 单据上半部分
billCenter : {},// 单据表内容
billBottom : {},// 单据下半部分
tbButtons : [],// 工具栏中按钮集合
seniorConditions : null,//查询 高级条件
url : null,//单据列表所对应的URL 例子：contentPath + '/xx/xx.action?'+ Ext.Object.toQueryString({'param1' : param1,'param2' : param2})
initComponent : function() {
var me = this;
if (me.tbButtons.length <= 0) {
alert('没有工具栏，请设置！')
me.callParent(arguments);
}
Ext.applyIf(me, {
dockedItems : [{
xtype : 'toolbar',
dock : 'top',
items : me.tbButtons
}],
items : [
{
xtype : 'BillContainer',
region : 'center',
billTitle : me.billTitle,
billTop : me.billTop,
billCenter : me.billCenter,
billBottom : me.billBottom,
seniorConditions : me.seniorConditions,
url : me.url
}
]
});
me.addEvents({
'billQueryGridClick' : true ,//查询列表单击事件
'billQueryBtnClick' : true//查询单据按钮单击事件
});
me.callParent(arguments);
var billContainer = me.down('BillContainer[region="center"]');
billContainer.addListener('billQueryGridClick',
function(grid, record, item, index, e, eOpts){
me.fireEvent('billQueryGridClick',grid, record, item, index, e, eOpts);
});
billContainer.addListener('billQueryBtnClick',function(btn){
me.fireEvent('billQueryBtnClick',btn);
});
}
});
下边几个类是他的组成元素
BillContainer.js
Ext.define('shinow.drug.common.layout.BillContainer', {
extend : 'Ext.container.Container',
border : true,
margin : 3,
requires : ['drug.common.layout.BillQuery',
'drug.common.layout.BillPart', 'shinow.ux.search.Field'],
layout : 'border',
alias : 'widget.BillContainer',
billTitle : '',// 单据标题
billTop : {},// 单据上半部分
billCenter : {},// 单据表内容
billBottom : {},// 单据下半部分
seniorConditions : null,//查询条件高级部分
url : null,
initComponent : function() {
var me = this;
Ext.applyIf(me, {
items : [{
xtype : 'BillQuery',
region : 'west',
collapsible : true,
header : false,
split : true,
collapsible : true,
hideCollapseTool : true,
seniorConditions :me.seniorConditions,
url : me.url
}, {
xtype : 'BillPart',
region : 'center',
billTitle : me.billTitle,
billTop : me.billTop,
billCenter : me.billCenter,
billBottom : me.billBottom
}]
});
me.addEvents({
'billQueryGridClick' : true,
'billQueryBtnClick' : true
});
me.callParent(arguments);
var billQuery = me.down('BillQuery[xtype="BillQuery"]');
billQuery.addListener('billQueryGridClick',function(grid, record, item, index, e, eOpts){
me.fireEvent('billQueryGridClick',grid, record, item, index, e, eOpts);
});
billQuery.addListener('billQueryBtnClick',function(btn){
me.fireEvent('billQueryBtnClick',btn);
});
}
});
BillQuery.js
Ext.define('shinow.drug.common.layout.BillQuery', {
extend : 'Ext.panel.Panel',
border : true,
requires : ['drug.common.layout.BillList'],
layout : 'border',
width : 200,
alias : 'widget.BillQuery',
seniorConditions : null,
url : null,
initComponent : function() {
var me = this;
Ext.applyIf(me, {
items : [{
xtype : 'panel',
region : 'north',
border : false,
layout : 'vbox',
defaults : {
width : 200,
border : false
},
items : [{
xtype : 'panel',
panelMark : 'kufangPanel',
height : 80,
layout : {
type : 'table',
columns : 1
},
bodyStyle : {
background : '#ffc',
padding : '10px 2px 0px 2px'
},
items : [{
xtype : 'label',
text : '业务部门'
}, {
xtype : 'combo',
name :'kf',
comboMark : 'kufangCombo',
labelAlign : 'right',
labelWidth : 30,
style : {
margin : "15px 0px 0px 0px"
},
width : 180,
fieldLabel : '库房'
}]
}, {
xtype : 'panel',
panelMark : 'danjusoubu',
height : 65,
cls : 'x-b-t',
layout : 'vbox',
bodyStyle : {
padding : '10px 2px 0px 2px'
},
items : [{
xtype : 'label',
text : '单据搜捕'
}, {
xtype : 'search',
width : 190,
style : {
margin : "10px 0px 0px 0px"
}
,
seniorConditions : me.seniorConditions
}]
}]
}, {
xtype : 'BillList',
region : 'center',
url : me.url
}]
});
me.addEvents({
'billQueryGridClick' : true ,
'billQueryBtnClick' : true
});
me.callParent(arguments);
var billList = me.down('BillList[xtype="BillList"]');
billList.addListener('itemclick',function(grid, record, item, index, e, eOpts ){
me.fireEvent('billQueryGridClick', grid, record, item, index, e, eOpts);
});
var queryBtn = me.down('panel[region="north"]').down('panel[panelMark="danjusoubu"]').down('search[xtype="search"]').down('button[action="queryBtn"]');
queryBtn.addListener('click',function(btn){
me.fireEvent('billQueryBtnClick', btn);
me.queryGrid(billList, queryBtn);
});
}
,
queryGrid : function(billList,queryBtn){
var me = this;
var billListStore = billList.getStore();
var kf = me.down('panel[region="north"]').down('panel[panelMark="kufangPanel"]').down('combo[comboMark="kufangCombo"]');
var queryParam = queryBtn.up('search[xtype="search"]').down('textfield[name="queryParam"]');
if(billListStore.proxy.url){
billListStore.proxy.extraParams = {'kf' : kf.getValue(), 'queryParam' : queryParam.getValue()};
billListStore.reload();
}else{
Ext.Msg.alert('警告','单据列表没有配置URL！');
}
}
});
Field.js
Ext.define('shinow.ux.search.Field', {
extend : 'Ext.form.FieldContainer',
alias : ['widget.searchfield', 'widget.search'],
requires : ['shinow.ux.search.Window'],
border : true,
seniorConditions : null,
initComponent : function() {
var me = this;
Ext.applyIf(me, {
layout : {
type : 'hbox',
align : 'middle'
},
cls : 'x-form-field x-panel-body-default',
height : 25,
items : [{
xtype : 'textfield',
border : 0,
height:25,
fieldStyle : {
border : 'none'
},
fieldCls : 'x-field-null',
flex : 1,
name : 'queryParam'
}, {
xtype : 'button',
action : 'queryBtn',
width : 40,
margin:'0 2 0 0',
text : '查询'
}, {
xtype : 'button',
width : 40,
text : '高级',
handler : function() {
var queryWin = Ext.create(
'shinow.ux.search.Window', {
seniorConditions : me.seniorConditions
});
queryWin.show();
}
}]
})
me.callParent();
}
});
现在的情况是：BillLayout类由BillContainer、BillQuery、Field三个类嵌套组成。我们的查询按钮在Field类里，如果不用事件传递，那么想在controller里监听到button的click事件，那么我们就得用选择器一层一层找到button这个对象，然后再监听事件。而我们只想给外边提供BillLayout类，此时就需要把button的click事件的监听，交给BillLayout。先来看下简单的界面。
首先我们需要在BillQuery类里注册一个监听事件
me.addEvents({//给自己的类注册自定义监听事件
'billQueryGridClick' : true ,
'billQueryBtnClick' : true
});
然后再拿到查询按钮对象，给按钮对象注册一个click的监听事件，每当button的click执行时，就触发BillQuery类的billQueryBtnClick这个事件：
var queryBtn = me.down('panel[region="north"]').down('panel[panelMark="danjusoubu"]').down('search[xtype="search"]').down('button[action="queryBtn"]');//通过选择器获得查询按钮对象
queryBtn.addListener('click',function(btn){//给查询按钮注册click监听事件
me.fireEvent('billQueryBtnClick', btn);//当button的click事件触发时就执行次行代码（触发BillQuery类的billQueryBtnClick监听事件。）
me.queryGrid(billList, queryBtn);
});
以此类推，就可以把button的click监听事件，传递给BillLayout类。
------------------------此贴是工作记录帖，本人组织语言欠佳，看不懂的不要骂------------------------