本文共 1852 字，大约阅读时间需要 6 分钟。

// JavaScript Document

Ext.namespace('CRM.Panels'); CRM.Panels.UserDetail = Ext.extend(Ext.Panel,{      width:350,   height:120,   data:{        ID: 0,     FirstName: '',     LastName: '',     Email: '',     City: '',     Phone:''   },   split:true,   tpl: new Ext.XTemplate([     '<div>编号：{ID}</div>',        '<div>姓名：{FirstName}-{LastName}</div>',     '<div>电话：{Phone}</div>',     '<div>城市：{City}</div>',     '<div>邮箱：{Email}</div>'   ]),   initComponent:function(){         CRM.Panels.UserDetail.superclass.initComponent.call(this);     if(typeof this.tpl === 'string'){         this.tpl = new Ext.XTemplate(this.tpl);       }     this.addEvents('UAlert');//注册新事件     this.addListener({//侦听函数          UAlert: { //注册的新事件        fn:this.onAlert,//调用onAlert方法         scope: this       }        });   },   //   onAlert: function(){     alert('注册的新事件');    },   UAlert:function(){     this.fireEvent('UAlert');    },   /   onRender: function(ct, position){           CRM.Panels.UserDetail.superclass.onRender.call(this, ct, position);     if(this.data){         this.update(this.data);     }   },   update: function(data){    this.data = data;    this.tpl.overwrite(this.body, this.data);   // this.fireEvent('update',this.data);   } });

//把新建的自定义组件注册为一种xtype

Ext.reg('UserDetail',CRM.Panels.UserDetail); /*使用： items:[    {     region:'west',     xtype:'UserDetail',     data: userData[0],     title:'User Detail'     }     ]*/

 

在页面上：

<script language="javascript">

 var userData = [     {ID:1,FirstName:'Zhang',LastName:'Jinshan',Email:'zjs@qq.com',Phone:'123456',City:'ZhangPing'},     {ID:2,FirstName:'Wang',LastName:'wu',Email:'wjf@qq.com',Phone:'123456',City:'ZhangPing'}  ];  Ext.onReady(function(){   var userDetail = new CRM.Panels.UserDetail({       applyTo:'body',    title:'User Detail',    data:userData[0]   });     updateContact = function(event, el, data){          userDetail.update(data.data);//调用更新数据   }   Ext.get('xt').on('click',updateContact,this,{data:userData[1]});   Ext.get('alert').on('click',function(){             userDetail.UAlert();             });  }) </script>

<button id="xt">点击</button>

<button id="alert">注册的新事件</button>

转载地址：http://kkkli.baihongyu.com/