`
andy_ghg
  • 浏览: 293750 次
  • 性别: Icon_minigender_1
  • 来自: 扬州
社区版块
存档分类
最新评论

EXTJS组件化(三)----组件之间的暧昧关系

EXT 
阅读更多
我忽然发现,菜鸟更愿意与人分享他的学习成果.

    在开发过程中,当许多小组件拼合成一个大组件之后,最先遇到的问题就是组件与组件之间的通信和数据交互.

    如果你的组件封装的比较死(即在创建的时候不需要配置属性).则可以通过组建的自定义事件来完成组件与组件之间的项目调用.下面的界面其实没有必要这么做,这么做的目的只是为了解释一下组件与组件之间相互交互数据:
//Panel1和Panel2为视图组件,Main为容器组件
Ext.namespace("Lesson2.Panel1");
/**
 * @author andy_ghg
 * @version 2009年10月17日1:36:26
 * @description 组件之间的数据交互(Grid)
 * @class Lesson2.Panel1
 * @extends Ext.Panel
 */
Lesson2.Panel1 = Ext.extend(Ext.Panel,{
	layout:"fit",
	height:200,
	//初始化函数
	initComponent : function(){
		Lesson2.Panel1.superclass.initComponent.call(this,arguments);
		this.addEvents("gridRowSelected");
		this.gridStore = new Ext.data.JsonStore({
			url:"",
			fields:["xx","yy"],
			totalPropery:"results",
			root:"items"
		});
		this.gridSm = new Ext.grid.CheckboxSelectionModel();
		
		this.gridCm = new Ext.grid.ColumnModel([this.gridSm,{
			header:"列一",
			dataIndex:"xx"
		},{
			header:"列二",
			dataIndex:"yy"
		}]);
		
		this.gridPanel = new Ext.grid.GridPanel({
			sm:this.gridSm,
			cm:this.gridCm,
			store:this.gridStore,
			viewConfig:{
				autoFill:true,
				forceFit:true
			}
		});
		this.gridPanel.on("rowclick",this.rowSelect,this);
		this.add(this.gridPanel);
	},
	//提供给外部调用的函数,返回其内部的store
	getStore:function(){
		return this.gridPanel.getStore();
	},
	rowSelect:function(grid,index,e){
		var record = grid.getStore().getAt(index);
		this.fireEvent("gridRowSelected",record);
	}
});
Ext.namespace("Lesson2.Panel2");
/**
 * @description 组件之间的相互交互(formPanel)
 * @class Lesson2.Panel2
 * @extends Ext.Panel
 */
Lesson2.Panel2 = Ext.extend(Ext.Panel,{
	layout:"fit",
	frame:true,
	initComponent:function(){
		Lesson2.Panel2.superclass.initComponent.call(this,arguments);
		this.addEvents("addRecord");
		this.formPanel = new Ext.FormPanel({
			defaults:{anchor:"95%"},
			defaultType:"textfield",
			labelWidth:55,
			items:[{
				fieldLabel:"XXXXX",
				name:"xx"
			},{
				fieldLabel:"YYYYY",
				name:"yy"
			}]
		});
		this.add(this.formPanel);
		this.addButton("加入",this.addRecord,this);
	},
	//触发自定义事件,并向事件中传递一个参数values
	addRecord:function(){
		var values = this.formPanel.getForm().getValues();
		this.fireEvent("addRecord",values);
	}
});

Ext.namespace("Lesson2.Main");
/**
 * @description 用于将两个子组件拼合在一起的容器
 * @class Lesson2.Main
 * @extends Ext.Panel
 */
Lesson2.Main = Ext.extend(Ext.Panel,{
	renderTo:Ext.getBody(),
	layout:"form",
	initComponent:function(){
		Lesson2.Main.superclass.initComponent.call(this,arguments);
		this.panel1 = new Lesson2.Panel1();
		this.panel2 = new Lesson2.Panel2();
		//在这里捕获panel2的自定义事件
		this.panel2.on("addRecord",this.addRecordToGrid,this);
		this.panel1.on("gridRowSelected",this.addRecordToForm,this);
		//将两个组件加入到视图中去
		this.add(this.panel1);
		this.add(this.panel2);
	},
	//TODO panel2的事件处理函数,在这里的this代表Lesson2.Main
	//这里通过this获取panel1的实例,再通过panel1的实例调用panel1的方法getStore()
	//panel1的getStore()函数会返回其内部的gridPanel的Store
	//参数的values就是panel2触发了自定义事件后传递进来的
	addRecordToGrid:function(values){
		var record = new Ext.data.Record(values);
		this.panel1.getStore().add(record);
	},
	//TODO 第二种方法,直接获取panel1里的store,效果是一样的
	addRecordToGrid_2:function(values){
		var record = new Ext.data.Record(values);
		this.panel1.gridStore.add(record);
	},
	//TODO panel1的事件处理函数,在这里会获取到panel2的实例,并通过该实例获取其内部的formPanel并调用
	//formPanel的相应方法来达到读取数据的目的
	addRecordToForm:function(record){
		this.panel2.formPanel.getForm().loadRecord(record);
	}
});
Ext.onReady(function(){
	var ls = new Lesson2.Main({
		title:"测试",
		width:400
	});
});


    如果你的组件封装的比较灵活,则可以在容器内就直接调用容器中的方法进行操作,比如上面的代码稍微修改一下(注意panel2的Button):
Ext.namespace("Lesson2.Panel1");
/**
 * @author andy_ghg
 * @version 2009年10月17日1:36:26
 * @description 组件之间的数据交互(Grid)
 * @class Lesson2.Panel1
 * @extends Ext.Panel
 */
Lesson2.Panel1 = Ext.extend(Ext.Panel,{
	layout:"fit",
	height:200,
	//初始化函数
	initComponent : function(){
		Lesson2.Panel1.superclass.initComponent.call(this,arguments);
		this.addEvents("gridRowSelected");
		this.gridStore = new Ext.data.JsonStore({
			url:"",
			fields:["xx","yy"],
			totalPropery:"results",
			root:"items"
		});
		this.gridSm = new Ext.grid.CheckboxSelectionModel();
		
		this.gridCm = new Ext.grid.ColumnModel([this.gridSm,{
			header:"列一",
			dataIndex:"xx"
		},{
			header:"列二",
			dataIndex:"yy"
		}]);
		
		this.gridPanel = new Ext.grid.GridPanel({
			sm:this.gridSm,
			cm:this.gridCm,
			store:this.gridStore,
			viewConfig:{
				autoFill:true,
				forceFit:true
			}
		});
		this.gridPanel.on("rowclick",this.rowSelect,this);
		this.add(this.gridPanel);
	},
	//提供给外部调用的函数,返回其内部的store
	getStore:function(){
		return this.gridPanel.getStore();
	},
	rowSelect:function(grid,index,e){
		var record = grid.getStore().getAt(index);
		this.fireEvent("gridRowSelected",record);
	}
});
Ext.namespace("Lesson2.Panel2");
/**
 * @description 组件之间的相互交互(formPanel)
 * @class Lesson2.Panel2
 * @extends Ext.Panel
 */
Lesson2.Panel2 = Ext.extend(Ext.Panel,{
	layout:"fit",
	frame:true,
	initComponent:function(){
		Lesson2.Panel2.superclass.initComponent.call(this,arguments);
		this.formPanel = new Ext.FormPanel({
			defaults:{anchor:"95%"},
			defaultType:"textfield",
			labelWidth:55,
			items:[{
				fieldLabel:"XXXXX",
				name:"xx"
			},{
				fieldLabel:"YYYYY",
				name:"yy"
			}]
		});
		this.add(this.formPanel);
	}
});

Ext.namespace("Lesson2.Main");
/**
 * @description 用于将两个子组件拼合在一起的容器
 * @class Lesson2.Main
 * @extends Ext.Panel
 */
Lesson2.Main = Ext.extend(Ext.Panel,{
	renderTo:Ext.getBody(),
	layout:"form",
	initComponent:function(){
		Lesson2.Main.superclass.initComponent.call(this,arguments);
		this.panel1 = new Lesson2.Panel1();
		this.panel2 = new Lesson2.Panel2({
			buttons:[{
				text:"确定",
				handler:this.addRecordToGrid_2,
				scope:this
			}]
		});
		//在这里捕获panel2的自定义事件
		this.panel1.on("gridRowSelected",this.addRecordToForm,this);
		//将两个组件加入到视图中去
		this.add(this.panel1);
		this.add(this.panel2);
	},
	//这里直接就获取当前容器的子组件panel2并获取panel2中的formPanel进行操作
	addRecordToGrid_2:function(){
		var values = this.panel2.formPanel.getForm().getValues();
		var record = new Ext.data.Record(values);
		this.panel1.gridStore.add(record);
	},
	//TODO panel1的事件处理函数,在这里会获取到panel2的实例,并通过该实例获取其内部的formPanel并调用
	//formPanel的相应方法来达到读取数据的目的
	addRecordToForm:function(record){
		this.panel2.formPanel.getForm().loadRecord(record);
	}
});
Ext.onReady(function(){
	var ls = new Lesson2.Main({
		title:"测试",
		width:400
	});
});


    两种写法有各自的好处.看大家怎么取舍了,当然,组件和组件之间的交互远不只这些简单的操作,还包括当一个组件还未被创建,而另外一个组件已经向这个组件发送数据等等,这些就要考虑使用一个第三方的数据组件来做中转.Extjs的StoreMgr可以做到,你也可以自己写一个符合你自己要求的数据组件,可以模仿StoreMgr写一个.
5
0
分享到:
评论
2 楼 andy_ghg 2009-11-11  
cqhydz 写道
再问一个问题
# Lesson2.Main = Ext.extend(Ext.Panel,{ 
#     renderTo:Ext.getBody(), 
#     layout:"form", 
#     initComponent:function(){ 
#         Lesson2.Main.superclass.initComponent.call(this,arguments); 
#         this.panel1 = new Lesson2.Panel1(); 

在具体使用中我发现,如果我申明为属性,其实也可以调用this.panel1,我想问他们之间有什么区别呢
# Lesson2.Main = Ext.extend(Ext.Panel,{ 
#     renderTo:Ext.getBody(), 
#     layout:"form",
      panel1:  new Lesson2.Panel1(),
#     initComponent:function(){ 
#         Lesson2.Main.superclass.initComponent.call(this,arguments); 
#       

如果声明为属性,当然可以用this来获取,只是,这样写起来代码不太好理解,显得比较乱,我在initComponent里去写this.xxxxx = new xxxxx()其实就是在为某个属性初始化,

function可以作为一个属性存在,对象也可以.
1 楼 cqhydz 2009-11-01  
再问一个问题
# Lesson2.Main = Ext.extend(Ext.Panel,{ 
#     renderTo:Ext.getBody(), 
#     layout:"form", 
#     initComponent:function(){ 
#         Lesson2.Main.superclass.initComponent.call(this,arguments); 
#         this.panel1 = new Lesson2.Panel1(); 

在具体使用中我发现,如果我申明为属性,其实也可以调用this.panel1,我想问他们之间有什么区别呢
# Lesson2.Main = Ext.extend(Ext.Panel,{ 
#     renderTo:Ext.getBody(), 
#     layout:"form",
      panel1:  new Lesson2.Panel1(),
#     initComponent:function(){ 
#         Lesson2.Main.superclass.initComponent.call(this,arguments); 
#       

相关推荐

    ExtJs常用布局--layout详解实例代码

    ExtJs常用布局--layout详解实例代码: ExtJs常见的布局方式有:border、form、absolute、column、accordion、table、fit、card、anchor 另外,不常见的布局有:tab、vbox、hbox 具体使用方法可见该文件的案例代码。 ...

    extjs-OA extjs-oa

    一个extjs的OA项目 extjs-OA extjs-oaextjs-OA extjs-oa

    extjs2----关于extjs 的使用,操作

    4. **数据绑定**:阐述ExtJS的数据模型(Store)和数据显示组件(Grid、Tree)之间的数据绑定机制,包括XML、JSON数据源的加载。 5. **表单元素**:深入探讨表单(Form)的创建,包括各种表单字段(TextField、...

    ExtJS快速入门--传智播客--蔡世友

    ExtJS快速入门--传智播客--蔡世友

    EXTJS开发包ext-3.2.0

    EXTJS开发包ext-3.2.0 EXTJS开发包ext-3.2.0

    Extjs4---combobox省市区三级联动+struts2

    在这个特定的项目“Extjs4---combobox省市区三级联动+struts2”中,我们将探讨如何利用ExtJS 4的ComboBox组件实现省市区的三级联动效果,并结合Struts2框架进行数据交互。 首先,`ComboBox`是ExtJS中的一个组件,它...

    Extjs源码之--Ext事件机制/继承关系

    在EXTJS这个强大的JavaScript框架中,事件机制是其核心组件之一,它允许组件之间进行通信和交互。在“Extjs源码之--Ext事件机制/继承关系”中,我们将深入探讨EXTJS如何处理事件以及其类层次结构。EXTJS的事件处理...

    ssh+extjs开发crud--经典

    - **Spring**:作为整个应用的核心容器,管理Bean的生命周期,实现依赖注入(DI),简化组件之间的耦合。 - **Hibernate**:提供对象关系映射(ORM)功能,使得Java对象可以直接持久化到数据库,简化了数据访问层的...

    ExtJS----HelloWorld程序源码

    在"ExtJS----HelloWorld程序源码"中,我们将会看到如何使用ExtJS来创建一个简单的“你好,世界!”应用。以下是对这个示例中涉及的主要知识点的详细解释: 1. **引入ExtJS库**:首先,你需要在HTML文件中引入ExtJS...

    ExtJs 1.1(zh-CN)

    ExtJs的核心特性包括组件化开发、数据绑定、布局管理、拖放功能以及丰富的用户界面组件。 一、组件化开发 ExtJs采用组件化的设计思想,允许开发者将复杂的用户界面拆分为独立的可重用组件。这些组件可以是简单的...

    extJs2.0+spket-1.6.11.zip

    1. **组件化设计**:ExtJS 2.0 强调组件化编程,允许开发者通过组合不同的UI组件来快速搭建页面。这些组件包括表格、树形视图、表单、菜单、工具栏等。 2. **数据绑定**:2.0版本引入了强大的数据绑定机制,使得...

    extjs实例--------嗖嗖嗖

    1. **ext-all.js**:这是ExtJS库的核心文件,包含了所有组件、数据处理、布局管理等功能的集合。在ExtJS应用中,通常会引入这个文件以获取完整功能。不过,为了优化加载速度和减少页面大小,生产环境中往往会选择...

    extJs例子-------

    ext基本的控件例子ext基本的控件例子ext基本的控件例子ext基本的控件例子

    extjs_4.1.0_community_extjs4-mvc-complex-dashboard.zip

    在ExtJS中,Model负责数据的存储和验证,View负责显示用户界面,Controller作为两者之间的桥梁,处理事件并协调它们的工作。在这个例子中,我们可能会看到多个Controller、Model和View类,每个都对应着仪表盘的某个...

    ExtJS笔记---Grid实现后台分页

    这篇“ExtJS笔记——Grid实现后台分页”探讨了如何在ExtJS的Grid组件中实现高效的后台分页功能。 后台分页是一种常见的数据处理策略,特别是在大数据量的情况下,它将数据分批加载,避免一次性加载所有记录导致的...

    extjs-v7.0-cmd

    extjs-cmd 脚手架安装包2 extjs-cmd 脚手架安装包3 extjs-cmd 脚手架安装包4

    extjs oracle分页---Json转换

    Oracle数据库是企业级的关系型数据库管理系统,广泛用于存储和管理大量结构化数据。在Web应用中,通常需要从Oracle数据库获取数据并进行分页显示,以提高用户界面的响应速度和用户体验。 分页是一种常见的数据处理...

    extjs--ext-3.2.1

    1. **组件化开发**:ExtJS 3.2.1的核心特性之一是它的组件模型。它提供了一系列预定义的UI组件,如表格(Grid)、树形视图(Tree)、面板(Panel)、窗口(Window)等,开发者可以方便地组合这些组件来构建复杂的...

Global site tag (gtag.js) - Google Analytics