例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([
"编号：{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"
}
]*/
在页面上：
代码如下<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>
http://m.bbyears.com/wangyezhizuo/45245.html
推荐访问: