- 浏览: 290610 次
- 性别:
- 来自: 扬州
文章分类
最新评论
-
wanglujiede:
幸亏看了这里,关于store的proxy的params问题顶一 ...
ExtJS 4.0 的改变(仅发表我发现的) -
freddie:
现在都extjs5了,感觉extjs3-extjs4变化挺大的 ...
ExtJS 4.0 的改变--较为完整的介绍。 -
jiangzi100:
写的真的很好,输入EXT这个工具很烂
EXTJS组件化(一)----建立你的思想 -
我飞我是飞飞:
StringHttpMessageConverter,我是3. ...
StringHttpMessageConverter乱码问题的解决(Spring 3.2) -
restmad:
999
EXTJS组件化(一)----建立你的思想
我忽然发现,菜鸟更愿意与人分享他的学习成果.
在开发过程中,当许多小组件拼合成一个大组件之后,最先遇到的问题就是组件与组件之间的通信和数据交互.
如果你的组件封装的比较死(即在创建的时候不需要配置属性).则可以通过组建的自定义事件来完成组件与组件之间的项目调用.下面的界面其实没有必要这么做,这么做的目的只是为了解释一下组件与组件之间相互交互数据:
如果你的组件封装的比较灵活,则可以在容器内就直接调用容器中的方法进行操作,比如上面的代码稍微修改一下(注意panel2的Button):
两种写法有各自的好处.看大家怎么取舍了,当然,组件和组件之间的交互远不只这些简单的操作,还包括当一个组件还未被创建,而另外一个组件已经向这个组件发送数据等等,这些就要考虑使用一个第三方的数据组件来做中转.Extjs的StoreMgr可以做到,你也可以自己写一个符合你自己要求的数据组件,可以模仿StoreMgr写一个.
如果声明为属性,当然可以用this来获取,只是,这样写起来代码不太好理解,显得比较乱,我在initComponent里去写this.xxxxx = new xxxxx()其实就是在为某个属性初始化,
function可以作为一个属性存在,对象也可以.
在开发过程中,当许多小组件拼合成一个大组件之后,最先遇到的问题就是组件与组件之间的通信和数据交互.
如果你的组件封装的比较死(即在创建的时候不需要配置属性).则可以通过组建的自定义事件来完成组件与组件之间的项目调用.下面的界面其实没有必要这么做,这么做的目的只是为了解释一下组件与组件之间相互交互数据:
//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写一个.
评论
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);
#
# 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);
#
# 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);
#
发表评论
-
StringHttpMessageConverter乱码问题的解决(Spring 3.2)
2013-02-03 23:05 18807特别标注了是Spring 3.2,在网上搜了半天,很多配置应该 ... -
Ext JS 4.x任意组件放入ComboBox的下拉框。例如tree、grid等。
2012-12-29 21:10 2214移步到http://www.uniorder.com/2013 ... -
Ext JS 4.1.1整合Kindeditor
2012-11-29 20:11 5292整合Kindeditor比CKEditor要简单许多许多(CK ... -
Ext JS 4.1.1整合CKEditor。
2012-11-28 23:44 2677Ext.define('GB.view.CKeditor' ... -
用Java反射写的生成ExtJS MVC model文件的类。
2012-10-24 22:11 3133如果你也在写Ext JS的MVC,恰好又遇到了类似下面的这个类 ... -
Error setting expression 'ext-gen1500' with value
2011-08-09 18:34 3610首先查看devMode是否设置为false,否则查看你提交的表 ... -
ExtJS 4.0 的改变--较为完整的介绍。
2011-07-26 22:14 37832惯例,看之前先看看我的很久很久以前的学习笔记(就是那个Word ... -
ExtJS 4.0.2a ActionColumn的使用
2011-07-10 23:50 9297ActionColumn是有问题的(不敢说是BUG),text ... -
Sencha SDK Tools 1.1的安装(Mac OS)
2011-06-08 21:06 4620安装其实十分简单,双击安装程序即可实现安装,底层貌似用到了Qt ... -
ExtJS 4.0 的改变(仅发表我发现的)
2011-05-25 17:23 10233最近写了一个较为完整版(有部分细节没说)的,去看看这里吧htt ... -
EXTJS配合Struts2的图片上传(可预览)例子代码
2009-12-23 20:56 8227最近一直在用Struts2,忽然心血来潮想做个图片上传并预览的 ... -
EXTJS3.0.3的本地资源包乱码的问题
2009-11-15 23:33 2279今天忽然看到首页上有3.0.3开放下载的消息,有点兴奋 ... -
EXTJS组件化(四)---减少你的代码
2009-11-11 02:14 4250代码量,BUG和维护成本是水涨船高的关系,这点应该不能被否认的 ... -
EXTJS组件化(二)----简易的私有和公有
2009-09-25 21:03 3072我一直认为,凡是我已经了解的东西,国内必定已经有了一大 ... -
EXTJS组件化(一)----建立你的思想
2009-09-25 00:51 11226首先感谢朱治生朋友转载了我的帖子,由于种种不可抗的原因导致Do ...
相关推荐
ExtJs常用布局--layout详解实例代码: ExtJs常见的布局方式有:border、form、absolute、column、accordion、table、fit、card、anchor 另外,不常见的布局有:tab、vbox、hbox 具体使用方法可见该文件的案例代码。 ...
一个extjs的OA项目 extjs-OA extjs-oaextjs-OA extjs-oa
extjs2----关于extjs 的使用,操作.比较初级,但是也比较使用。适合初步接触extjs的朋友
Extjs4---combobox省市区三级联动+struts2
ExtJS快速入门--传智播客--蔡世友
ExtJS----HelloWorld程序源码
Extjs4---grid的修改、删除功能---结合struts2、hibernate
extjs in action 1-6章节 pdf extjs in action 1-6章节 pdf
extjs_4.1.0_community_extjs4-mvc-complex-dashboard
extJs2.0+spket-1.6.11.zip extJs2.0+spket-1.6.11.zip
EXTJS开发包ext-3.2.0 EXTJS开发包ext-3.2.0
extjs-theme-bootstrap-master.zip
ext基本的控件例子ext基本的控件例子ext基本的控件例子ext基本的控件例子
ExtJs-4.1.1a-gpl+中午手册+入门教程
通过这个观看视频会让你很快的了解到extjs,并且能够很快的进入ext的使用
本酒店管理系统采用三层架构,SQL Server数据库。最主要的是采用了Extjs框架。 酒店系统实现了部分功能。aspx后台页面几乎无代码。业务逻辑处理全部采用Extjs自带的函数。对于学习Extjs的框架的程序员实际应用最佳...
ExtJS 组件扩展 如何正确使用Extjs---扩展组件的两个层次
Extjs-ExtDesigner-1.1.2+完全解密工具.part1.rar