Extjs自定义组件
来源:互联网 发布:长沙智工软件 编辑:程序博客网 时间:2024/05/21 16:59
// 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>
- ExtJS 自定义组件
- Extjs 自定义组件实例
- Extjs自定义组件
- Extjs自定义组件
- extjs自定义组件类
- 扩展/自定义 Extjs.Toolbar 组件
- ExtJS 自定义组件(二)
- 扩展/自定义 Extjs.Toolbar 组件
- Extjs的一个自定义组件
- ExtJS教程----自定义下载组件
- Extjs中itemselector组件自定义方法得到displayField值
- ExtJs组件学习笔记
- ExtJS中的组件体系
- EXTJS 组件详解
- ExtJS Button组件
- ExtJS 4 Grid组件
- Extjs组件的生命周期
- Extjs组件的生命周期
- NullPoint问题,有时候会引起大错误
- jquery的ajax()函数传值中文乱码的解决方案
- iOS 关于音频开发
- UVaOJ 10361 - Automatic Poetry
- 较为简单的一种判断Retina屏幕的方法
- Extjs自定义组件
- C#学习之四---ListBox
- 一个牛人给java初学者的建议
- poj 1903 zoj 2469 la2965(live archive) 中途相遇法
- 编写一个方法,输出在一个字符串中,指定字符串出现的次数
- C#事件(event)解析(转)
- smarty保留变量
- hdu 3549 Flow Problem 最大流入门 EK算法
- WEB水晶报表直接打印 ---设置