ExtJS Custom Component Event binding two instances

Example 1

Optimized the code, the results are as follows.

Call:

The code is as follows	Copy Code
<script type= "Text/javascript" > function aaa () { var student_panel = new WX.student.AddStudent ({ Callback_fun:function () { Alert ("I am the method of the page"); } ). Show (); } </script>

Component definition

The code is as follows

Copy Code

Ext.define (' WX.student.AddStudent ', { Extend: ' Ext.window.Window ', Modal:true, height:585, width:590, Layout: { Type: ' Fit ' }, Title: ' New Students ', For component function callbacks Callback_fun:function () {}, Initcomponent:function () { var me = this; Ext.applyif (Me, { Items: [ { Waittitle: ' Loading ... ', Items: [ ...... ], buttons:[{ Text: ' Save ', Scope:this,//<============== key parameters Handler:function () { Do something ... Alert ("Event for component"); This.callback_fun (); } }] } ] }); Me.callparent (arguments); } });

Example 2

New piece a JS file

The code is as follows

Copy Code

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> number:{id}</div> ', ' <div> name:{firstname}-{lastname}</div> ', ' <div> telephone:{phone}</div> ', ' <div> City:{city}</div> ', ' <div> e-mail:{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 ')/Register new event This.addlistener ({//listening function Ualert: {//Registration of new events fn:this.onalert,//Call Onalert method Scope:this } }); }, ////////////// Onalert:function () { Alert (' Registered new event '); }, 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); } }); Register the new custom component as a xtype Ext.reg (' Userdetail ', CRM. Panels.userdetail); /* Use: items:[ { Region: ' West ', Xtype: ' Userdetail ', Data:userdata[0], Title: ' User Detail ' } ]*/

On the page:

The code is as follows

Copy Code

<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)//Call Update data } Ext.get (' XT '). On (' click ', Updatecontact,this,{data:userdata[1]}); Ext.get (' alert '). On (' click ', function () { Userdetail.ualert (); }); }) </script> <button id= "XT" > Click </button> <button id= "alert" > Registered new Events </button>