ExtJs自定义组件事件绑定两个实例

例1

优化了一下代码，结果如下。

调用：

 代码如下 复制代码

<script type="text/javascript">
function aaa(){
 var student_panel = new WX.student.AddStudent({
  callback_fun:function(){
   alert("我是页面的方法");
  }
 }).show();
}
</script>

组件定义

 代码如下 复制代码

Ext.define('WX.student.AddStudent', {
 
    extend: 'Ext.window.Window',

    modal:true,
    height: 585,
    width: 590,
    layout: {
        type: 'fit'
    },
    title: '新增学生',
    //用于组件函数回调
    callback_fun:function(){},
    initComponent: function() {
     
        var me = this;
       
        Ext.applyIf(me, {
            items: [
                {
                    waitTitle: '加载中...',
                    items: [
                        ......
                    ],
                    buttons:[{
                     text:'保存',
                     scope:this,                  // <============== 关键参数
                     handler:function(){
                      //DO SOMETHING...
                      alert("组件的事件");
                      this.callback_fun();
                     }
                    }]
                }
            ]
        });
        me.callParent(arguments);
    }

});

例2

新件一个JS文件

 代码如下 复制代码

 

// 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>
时间： 2024-08-02 00:50:57

ExtJs自定义组件事件绑定两个实例的相关文章

extjs自定义组件函数回调实例介绍

工程里用到了Sencha ExtJs,因为特定的组件原因,导致很多组件得自己.组件定义完成之后的 Success_callback 因为之前没做过,所以这次把它记录下来方便以后查阅.直接上代码: 界面调用  代码如下 复制代码 <script type="text/javascript"> function aaa(){  var student_panel = new WX.student.AddStudent({   //传入回调函数,直接显示.   callback_

js鼠标滑轮滚动事件绑定的简单实例

 本篇文章主要介绍了js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器).需要的朋友可以过来参考下,希望对大家有所帮助  代码如下: /** Event handler for mouse wheel event.           *鼠标滚动事件           */           var wheel = function(event) {               var delta = 0;               if (!event) /* For IE. */  

flex 自定义组件事件问题

问题描述 flex 自定义组件事件问题 实现功能:定义自定义组件中mx:Image控件的鼠标经过事件: 自定义组件(名称为Component1.mxml)主要代码: <fx:Script> private function mouseover(event:MouseEvent):void { //分发(广播)事件;当点击登录按钮时就触发了这一事件 var e:MyEvent= new MyEvent(MyEvent.myMOUSEOVER); this.dispatchEvent(e); }

jQuery事件绑定和委托实例_jquery

本文实例讲述了jQuery事件绑定和委托.分享给大家供大家参考.具体方法如下: jQuery事件的绑定和委托可以用多种方法实现,on()  . bind()  . live()  . delegate() ,还有one().   有时我们可能会像下面这样绑定一个事件: 复制代码 代码如下: $("#div1").click(function() {      alert("点击后触发");  }); 上面的事件绑定,我们可以通过多种方式去实现:  1. on() 复

JS 事件绑定函数代码实例

var bind=function(object,type,fn){ if(object.attachEvent){//IE浏览器 object.attachEvent("on"+type,(function(){ return function(event){ window.event.cancelBubble=true;//停止时间冒泡 object.attachEvent=[fn.apply(object)];//----这里我要讲的是这里 } })(object),false)

自定义组件事件-JSP中的自定义标签用来上传多张图片文件

问题描述 JSP中的自定义标签用来上传多张图片文件 跪求:自定义标签实现上传图片功能,java中的类代码咋写啊,最好能实现能一次上传多张照片.

js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)_javascript技巧

复制代码 代码如下: /** Event handler for mouse wheel event.          *鼠标滚动事件          */          var wheel = function(event) {              var delta = 0;              if (!event) /* For IE. */                  event = window.event;              if (event.w

JavaScript实现跨浏览器的添加及删除事件绑定函数实例_javascript技巧

本文实例讲述了JavaScript实现跨浏览器的添加及删除事件绑定函数.分享给大家供大家参考.具体如下: IE 的事件绑定函数是 attachEvent:而 Firefox, Safari 是 addEventListener:Opera 则两种都支持.使用jQuery就可以使用简单的bind(),或者$().click()之类的函数解决,而如果不使用JavaScript框架的时候,大家可是使用下面的封装bind()函数. 添加事件绑定 bind() /*********************

Android编程自定义组件实例详解

本文实例讲述了Android编程自定义组件.分享给大家供大家参考,具体如下: 在Android中,所有的UI界面都是由View类和ViewGroup类及其子类组合而成.其中,View类是所有UI组件的基类,而ViewGroup类是容纳这些UI组件的容器. 其本身也是View类的子类. 在实际开发中,View类还不足以满足程序所有的需求.这时,便可以通过继承View类来开发自己的组件. 开发自定义组件的步骤: 1.创建一个继承android.view.View类的View类,并且重写构造方法. 2