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
    });

});