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

时间：2013-11-01 编辑：简简单单来源：一聚教程网

例1

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

调用：

代码如下	复制代码

组件定义

代码如下

复制代码

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([
    '

编号：{ID}

',
'

姓名：{FirstName}-{LastName}

',
'

电话：{Phone}

',
'

城市：{City}

',
'

邮箱：{Email}

'
]),
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'
    }
]*/

在页面上：

代码如下

复制代码

上一个： Sencha ExtJS使用中一些常见问题总结
下一个： extjs自定义组件函数回调实例介绍

推荐专题

最新下载

热门教程

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

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程