ExtJs事件的传递

最新推荐文章于 2019-11-05 16:03:55 发布
最新推荐文章于 2019-11-05 16:03:55 发布
阅读量169 收藏
点赞数
文章标签： ux python
原文链接：https://my.oschina.net/crazybird/blog/346931
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

在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。先来看下简单的界面。

195534_qocL_107671.jpg

首先我们需要在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类。


------------------------此贴是工作记录帖，本人组织语言欠佳，看不懂的不要骂------------------------


转载于:https://my.oschina.net/crazybird/blog/346931

weixin_34067102
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ExtJS 工具栏 分页事件参数
10-29
在 ExtJS 中，工具栏分页事件参数是指在进行分页操作时，需要传递给服务器的参数。这些参数通常包括当前页码、每页记录数、搜索关键字等。通过设置这些参数，可以实现复杂的数据分页和搜索功能。 参数设置 在上面...
ExtJS 组件的扩展和继承（一）
xiaoshang的专栏
08-17 1318
扩展组件的时候，最好给其设置单独的 xtype， 这样就能比较容易的和其他组件集成。 虽说扩展 ExtJS 的组件只不过是用 Ext.extend() 来实现，多少还是有些窍门。 例： 扩展 Ext.Panel，得到名为 MyComponent 的组件。 xtype 设置为 mycomponent。 MyComponent = Ext.extend(Ext.Panel, {
EXTJS 事件机制的探究
陶龙
05-14 674
ExtJS 是一种 JavaScript 编写的与后台无关的 Ajax 框架,它提供了可重用的对象和部件. 在简化 Ajax 开发的同时又起到丰富客户端界面的效果.该框架的核心思想是通过 JavaScript 动态创建页面的标记元素,从而使得页面更灵活. 其实 ExtJS 本身并没使用到新技术, 而是在 JavaScript 基础上结合这些设计思想发展过来的.而 ExtJS 事件机制作为ExtJS
EXTJS触发事件的方法
m0_37822534的博客
11-05 1414
1.对文本操作时失去焦点或者获取焦点触发事件 var this = me, var feild = Ext.create("Ext.form.field.Text",{ anchor: "100%", fieldLabel: "标题", labelAlign: "right", labelWid...
extJS环境下tabPanel的切换事件、监听事件、刷新或重新载入
热门推荐
neoEson
10-21 1万+
将一个页面下的tabPanel拆分为两个panel，但是当第一个界面操作后，第二个界面的内容可能有变化，需要刷新或重新载入界面！ 切换Tab时，页面刷新重载！ 激活tab时，页面刷新重载！ 此时的操作，试了好久！找到了各种方法！都没有实现！以下为最终实现方法： 环境： MyEclipse6.5 extjs2.0 源代码： Ext.onReady(function(){
ExtJs的事件机制Event(学员总结)
redarmychen的专栏
05-14 1万+
ExtJs的事件机制Event 一、事件的三种绑定方式        1、HTML/DHTML               在标签中直接增加属性触发事件     function hello(){ alert("hello word"); }
extjs 分页使用jsp传递数据示例
10-25
extjs实现的分页，使用jsp传递数据，具体实现过程如下，需要的朋友莫错过
extjs的数据传递
01-25
### ExtJS 数据传递详解 #### 一、引言 在Web开发中，前端与后端之间的数据交互至关重要。ExtJS作为一个强大的JavaScript框架，提供了多种方式进行数据传输，其中使用AJAX进行前后端通信是最常见的方式之一。本文...
Extjs学习笔记之八 继承和事件基础
10-29
在深入探讨ExtJS的继承和事件基础之前，让我们先了解一些基本概念。JavaScript是一种基于原型的面向对象语言，这意味着对象可以直接从其他对象继承属性和方法。`Ext.extend`是ExtJS提供的一种继承机制，用于创建类的...
ExtJS 事件笔记
08-27
- **其他浏览器**：事件对象作为处理函数的参数传递。 4. **this的作用域**： - JavaScript中的`this`取决于函数调用的方式。在对象方法中，`this`指向该对象；在全局环境下，`this`通常指向`window`对象。 - `...
ExtJs中的事件机制
hanhan313的专栏
11-11 1万+
1.事件的3中绑定方式        HTML/DHTML        DOM        EXTJS 1) HTML/DHTML 这也是最传统的js绑定事件 function hello(){ alert('hello word'); } 2) DOM Ext.onReady(function(){ //判断是否是IE浏览器 if(Ext.isIE){
EXTJS4.0 页面间传值 监听事件的使用 值处理
u013754950的专栏
12-10 1678
第一种，监听事件进行数据的验证 listeners:{ blur:function(text,obj){ var startTime = dataForm.down("datefield[name='beginTime']").getValue(); var endTime = dataForm.down("datefield[name='endTime']").getValue();
Extjs的事件机制
fanpeii的专栏
01-13 1175
下面是一个简单的事件定义，定义一个孩子的类。   (function(){ Ext.onReady(function(){ //定义一个孩子的类，赋予其喝牛奶的事件 Ext.define("children",{ extend:'Ext.util.Observable',//这个类提供了 addEvents addListener fireEvent函数
extjs各个组件之间的交互
乐天小葵
06-20 739
1.将几个组建连同他的父类放到同一个
ExtJS中关于scope和createDelegate()
技术收藏
03-11 2817
关于JavaScript中this的使用，这是一个由来已久的问题了。我们这里就不介绍它的发展历史了，只结合具体的例子，告诉大家可能会遇到什么问题，在遇到这些问题时EXT是如何解决的。在使用EXT时，最常碰到的就是使用Ajax回调函数时出现的问题，如下面的代码所示。 input type="text" name="text" id="text">现在的HTML 页面中有一个text输入框
(Ext)Ext事件的处理
溺水的鱼 - Later equals never.
01-19 4397
   Ext事件的处理   在Javascript中，你将不得不经常进行事件的处理。这有时很难顺利进行，因为你需要进行不同的跨浏览器标准化事件处理。而ExtJs使得处理事件变得非常容易，有时候甚至还富于乐趣(!)。  非常基础的例子 想象一下这样一个例子，当用户点击一个链接时，你想向他显示一则警告信息。请继续往下看，因为在开始处理事件前你也许想知道更多。var el =
Ext 事件连环与传参
闲来之笔
02-27 1051
     ExtJS            Ext.onReady(function() {          function firstFn(){                       btnPass.fireEvent("secondEvent", btnPass, pass second value);            b
EXTJS入门与实战指南
在编写EXTJS应用时，需要对变量的声明、作用域以及如何在不同作用域之间传递数据有深入理解。 EXTJS的程序规划通常涉及事前准备，包括确定所需资源、创建必要的文件结构等。例如，一个简单的EXTJS应用可能包含HTML...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值