EXT 组件化编程[通信]

今天在看以前收藏的文章,发现一篇以前看不懂的.今天实现了一下,感觉思路挺好的.代码如下:

 

//Panel和FormPanel为视图组件,Main为容器组件  Ext.ns('Xuyi.Communication');/**   * @description 组件之间的数据交互(Grid)   * @class Xuyi.Communication.Panel   * @extends Ext.Panel   */ Xuyi.Communication.Panel = Ext.extend(Ext.Panel,{    layout:'fit',    height:200,    border:false,    initComponent:function(){            Xuyi.Communication.Panel.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);//触发事件,传入相关参数    }});/**   * @description 组件之间的相互交互(formPanel)   * @class Xuyi.Communication.Formpanel   * @extends Ext.Panel   */ Xuyi.Communication.Formpanel = Ext.extend(Ext.Panel,{    layout:"fit",    frame:true,    border:false,    initComponent:function(){        Xuyi.Communication.Formpanel.superclass.initComponent.call(this,arguments);        this.addEvents("addRecord");                this.formPanel = new Ext.FormPanel({            defaults:{anchor:"95%"},            defaultType:"textfield",            labelWidth:55,            items:[{                fieldLabel:"列一",                name:"xx"            },{                fieldLabel:"列二",                name:"yy"            }]        });        this.add(this.formPanel);                this.addButton("加入",this.addRecord,this);    },    addRecord:function(){        var values = this.formPanel.getForm().getValues();        this.fireEvent("addRecord",values);//触发事件,传入相关参数    }});/**   * @description 用于将两个子组件拼合在一起的容器1 * @class Xuyi.Communication.Main1   * @extends Ext.Panel   */ Xuyi.Communication.Main1 = Ext.extend(Ext.Panel,{    renderTo:Ext.getBody(),    layout:"form",    style:'margin:50px auto',    border:false,    initComponent:function(){            Xuyi.Communication.Main1.superclass.initComponent.call(this,arguments);                this.panel = new Xuyi.Communication.Panel();        this.form = new Xuyi.Communication.Formpanel();                //两种方法获取store        //捕获事件        //this.form.on("addRecord",this.addRecordToGrid,this);        this.form.on("addRecord",this.addRecordToGrid_2,this);        this.panel.on("gridRowSelected",this.addRecordToForm,this);                this.add(this.panel);        this.add(this.form);    },    addRecordToGrid:function(values){        var record = new Ext.data.Record(values);        this.panel.getStore().add(record);    },    addRecordToGrid_2:function(values){        var record = new Ext.data.Record(values);        this.panel.gridPanel.store.add(record);    },    addRecordToForm:function(record){        this.form.formPanel.getForm().loadRecord(record);    }});/**   * @description 用于将两个子组件拼合在一起的容器2   * @class Xuyi.Communication.Main2  * @extends Ext.Panel   */ Xuyi.Communication.Main2 = Ext.extend(Ext.Panel,{    renderTo:Ext.getBody(),    layout:"form",    style:'margin:50px auto',    border:false,    initComponent:function(){        Xuyi.Communication.Main2.superclass.initComponent.call(this,arguments);                this.panel = new Xuyi.Communication.Panel();        this.form = new Xuyi.Communication.Formpanel({            buttons:[{                text:'确定',                handler:this.addRecordToGrid_2,                scope:this            }]        });        //在这里捕获form的自定义事件         this.panel.on("gridRowSelected",this.addRecordToForm,this);        //将两个组件加入到视图中去          this.add(this.panel);        this.add(this.form);    },       //这里直接就获取当前容器的子组件form并获取form中的formPanel进行操作       addRecordToGrid_2:function(){        var values = this.form.formPanel.getForm().getValues();        var record = new Ext.data.Record(values);        this.panel.gridStore.add(record);     },       //TODO panel的事件处理函数,在这里会获取到form的实例,并通过该实例获取其内部的formPanel并调用       //formPanel的相应方法来达到读取数据的目的       addRecordToForm:function(record){        this.form.formPanel.getForm().loadRecord(record);    }});Ext.onReady(function(){    var ls1 = new Xuyi.Communication.Main1({        title:'测试一',        width:400    });    var ls2 = new Xuyi.Communication.Main2({        title:'测试二',        width:400    });});