基于ExtJS的左右框架和消息传递处理



更改为配置动态加载后，将可以作为左右关系的框架使用

Ext.namespace('cms.SysConfig');

//左右组合管理
cms.SysConfig.fnPanel = function(config) {
 //如果在继承时在override参数中定义了constructor方法，则子类不会继承父类在构造函数中定义的属性，
 //但是可以继承在prototype中定义的属性，
 //在这种情况下只有在constructor中调用父类的构造函数myClass.superclass.constructor.call(this,……）;
 //才会继承父类在构造函数中定义的对象。
 cms.SysConfig.fnPanel.superclass.constructor.call(this, config);
};

Ext.extend(cms.SysConfig.fnPanel, //子类名
           Ext.ux.BaseControl, //父类名
    {                         //子类的创建函数，存在就Override，不存在就create
     leftPanel:undefined,
     rightfnPanel:undefined,
     allfnPanel:undefined,
    
     getControl : function() {
      
        var items = new Array();
   
      //左侧面板
   this.leftfnPanel = new cms.SysConfig.leftfnPanel({
    listeners : {//监听左侧触发的事件消息
       // menuEvent : this.navigateEventHandler.createDelegate(this), //监听方法，第一种写法
        NavigateEvent:this.navigateEventHandler.createDelegate(this)
   }
   });
   //监听方法，第二种写法
   //this.leftfnPanel.addListener("menuEvent",this.navigateEventHandler.createDelegate(this),this.leftfnPanel);
   //监听方法，第三种写法，三种写法效果等同
   this.leftfnPanel.on("menuEvent",this.navigateEventHandler.createDelegate(this),this.leftfnPanel);
   
   items.push(this.leftfnPanel.getControl());
       
    //左侧面板
   this.rightfnPanel = new cms.SysConfig.rightfnPanel({
    listeners : {//监听左侧触发的事件消息
    rightEvent : this.rightEventHandler.createDelegate(this)
    }
   });
        items.push(this.rightfnPanel.getControl());
       
        //总的组装面板
     this.allPanel = new Ext.Panel({
      region:'center',
      border : false,
      frame : false,
      layout: 'border',
      items : [items],
      listeners : {
       resize : function(comp, adjWidth, adjHeight, rawWidth, rawHeight) {
       }.createDelegate(this)
      }
     });
     
   return this.allPanel;
     },
      /**
     * 构建完对象进行数据的初始化加载
     * @param {} params
     */
    init:function(){
     this.leftfnPanel.init();
     this.rightfnPanel.init();
    },
    /**
     * 左侧面板触发的事件
     * 联动右侧变化
     */
    navigateEventHandler:function(eventObject){
       //调用右侧代码
     this.rightfnPanel.onEventHandler(eventObject);
    },
   
     /**
     * 右侧侧面板触发的事件
     * 联动左侧变化
     */
    rightEventHandler:function(eventObject){
     //调用右侧代码
       this.leftfnPanel.onEventHandler(eventObject);
    }
    
    });

Ext.namespace('cms.SysConfig');

cms.SysConfig.leftfnPanel = function(config) {
 //如果在继承时在override参数中定义了constructor方法，则子类不会继承父类在构造函数中定义的属性，
 //但是可以继承在prototype中定义的属性，
 //在这种情况下只有在constructor中调用父类的构造函数myClass.superclass.constructor.call(this,……）;
 //才会继承父类在构造函数中定义的对象。
 cms.SysConfig.leftfnPanel.superclass.constructor.call(this, config);
};

Ext.extend(cms.SysConfig.leftfnPanel, //子类名
           Ext.ux.BaseControl, //父类名
    {                         //子类的创建函数，存在就Override，不存在就create
     navigatePanel:undefined,
     allPanel:undefined,
     getControl : function() {
          var items = new Array();
         
          var btnItems=new Array();
         
           var businessTypeConfigBtn = new Ext.Button({
                id:"businessTypeConfig",
                code:"businessTypeConfig",
     text : '业务类型配置',
     height:40,
     width:"100%",
     handler : this.btnHandler.createDelegate(this)

    });
    btnItems.push(businessTypeConfigBtn);
   
    var unitTypeConfigBtn = new Ext.Button({
                id:"unitTypeConfig",
                code:"unitTypeConfig",
     text : '单位类型配置',
     height:40,
     width:"100%",
     handler : this.btnHandler.createDelegate(this)

    });
   btnItems.push(unitTypeConfigBtn);
   
    var BusinessTypeunitTypeConfigBtn = new Ext.Button({
                id:"BusinessTypeunitTypeConfig",
                code:"BusinessTypeunitTypeConfig",
     text : '业务类型下的单位类型配置',
     height:40,
     width:"100%",
     handler : this.btnHandler.createDelegate(this)

    });
   btnItems.push(BusinessTypeunitTypeConfigBtn);
   
          var placeTypeConfigBtn = new Ext.Button({
               id:"placeTypeConfig",
                code:"placeTypeConfig",
     text : '场所类型配置',
     height:40,
     width:"100%",
     handler : this.btnHandler.createDelegate(this)

    });
    btnItems.push(placeTypeConfigBtn);
   
          var unitTypeplaceTypeConfigBtn = new Ext.Button({
               id:"unitTypeplaceTypeConfig",
                code:"unitTypeplaceTypeConfig",
     text : '单位类型下的场所类型配置',
     height:40,
     width:"100%",
     handler : this.btnHandler.createDelegate(this)

    });
      btnItems.push(unitTypeplaceTypeConfigBtn);
     
       var unitTypeAlarmTypeConfigBtn = new Ext.Button({
               id:"unitTypeAlarmTypeConfig",
                code:"unitTypeAlarmTypeConfig",
     text : '单位类型下的报警类型配置',
     height:40,
     width:"100%",
     handler : this.btnHandler.createDelegate(this)

    });
      btnItems.push(unitTypeAlarmTypeConfigBtn);
     
     
    var placeTypeGroupConfigBtn = new Ext.Button({
               id:"placeTypeGroupConfig",
                code:"placeTypeGroupConfig",
     text : '场所类型组配置',
     height:40,
     width:"100%",
     handler : this.btnHandler.createDelegate(this)

    });
    btnItems.push(placeTypeGroupConfigBtn);
   
   
          this.navigatePanel = new Ext.Panel({
    //title:"导航面板",
    items:[btnItems]
          });
         
          items.push(this.navigatePanel);
          
            //左侧导航组合面板
   this.allPanel = new Ext.Panel({
    title:"数据字典配置",
    id:"leftPanel",
    region:"west",
    width:300,
    items:[items],
    listeners : {
    //底层树
    NavigateEvent : function(eventObject) {           
     //事件传递到上层面板
     this.fireEvent(eventObject.eventCode, eventObject);
    }.createDelegate(this)
      }
   }); 
   this.navigatePanel.parent =this.allPanel;
   return this.allPanel;
     },
     /**
     * 构建完对象进行数据的初始化加载
     * @param {} params
     */
    init:function(){
     
    },
    btnHandler:function(button, e) {
  this.throwMenuEvent(button);
 },
    throwMenuEvent : function(button) { 
  var eventObject = {
   eventCode : 'menuEvent',
   sender : this,
   params : {
    operate :button.code,
    target : button,
    data: null
   }
   };
   this.fireEvent(eventObject.eventCode, eventObject);
 },
 /**
  * 接收来自右侧的消息
  * 并进行业务的切换
  * @param {} eventObject
  */
  onEventHandler:function(eventObject){
        switch(eventObject.params.operate){
     
       }
     }
   
});

Ext.namespace('cms.SysConfig');

cms.SysConfig.rightfnPanel = function(config) {
 //如果在继承时在override参数中定义了constructor方法，则子类不会继承父类在构造函数中定义的属性，
 //但是可以继承在prototype中定义的属性，
 //在这种情况下只有在constructor中调用父类的构造函数myClass.superclass.constructor.call(this,……）;
 //才会继承父类在构造函数中定义的对象。
 cms.SysConfig.rightfnPanel.superclass.constructor.call(this, config);
};

Ext.extend(cms.SysConfig.rightfnPanel, //子类名
           Ext.ux.BaseControl, //父类名
    {                         //子类的创建函数，存在就Override，不存在就create
     placeTypefnPanel:undefined,
     businessTypefnPanel:undefined,
     allPanel:undefined,
     getControl : function() {
      
           var fnPanelItems = new Array();
          //功能面板1..N
        
          //场所类型组合管理
         this.placeTypefnPanel=new cms.SysConfig.PlaceTypefnPanel({
            code:"placeTypeConfigfnPanel"
         });
         fnPanelItems.push(this.placeTypefnPanel.getControl());
        
         //业务类型组合管理
         this.businessTypefnPanel=new cms.SysConfig.BusinessTypefnPanel({
            code:"businessTypeConfigfnPanel"
         });
         fnPanelItems.push(this.businessTypefnPanel.getControl());
          
         this.allPanel= new Ext.Panel({
         id:"rightPanel",
         region:"center",
      layout:"fit",
      items:[fnPanelItems]
      });
      return this.allPanel;
     },
      /**
     * 构建完对象进行数据的初始化加载
     * @param {} params
     */
    init:function(){
     this.placeTypefnPanel.init(-1);//-1全部场所类型
    },
  
    /**
     * 接收左侧的消息并处理
     * 切换右侧功能的显示
     * @param {} eventObject
     */
    onEventHandler:function(eventObject){
      switch(eventObject.params.operate){
         case "businessTypeConfig":{
          this.switchPanel("businessTypeConfigfnPanel");
          break;
         }
         case "placeTypeConfig":{
            this.switchPanel("placeTypeConfigfnPanel");
          break;
         }
      }
    },
     /**
  * 控制面板的显示
  */
 switchPanel: function(panelCode){
  for (var index = 0, len = this.allPanel.items.items.length; index < len; index++) {
   var item = this.allPanel.items.items[index];
   if (item.code == panelCode) {
    item.hidden && item.show();
   } else {
    !item.hidden && item.hide();
   }
  }
  this.allPanel.doLayout();
 }
    
});