请教关于extjs的类继承中复杂数据类型继承的问题

xymao123 xymao123 墨衍会员 · AI 创作全网分发 墨衍智能分发 通过墨衍一键同步至各平台 可同步平台 CSDN微信公众号微博知乎掘金百家号博客园抖音小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年,写一次发全网 我也要 + 加入社区
extjs6.2
定义了一个基类MyCtrlBase,里面有一个复杂数据类型的属性properties
properties: [
{ name: 'Id', type: 'text', value: '' },
{ name: 'Caption', type: 'text', value: 'textfield' }
]

然后派生出一个新类MyTextField,在新建两个MyTextField的实例tmp1,tmp2. 在新建实例的时候,给属性赋值
tmp1.setProperty('Id', tmp1.id);
tmp2.setProperty('Id', tmp2.id);

为什么tmp1.id 会被修改为tmp2.id。可能是因为复杂变量的引用问题,但要怎么修改才对,请各位高手指点。

源代码如下:



<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>test</title>
<link rel="Stylesheet" type="text/css" href="file:///E:/Software/ext-6.2.0-gpl/ext-6.2.0/build/classic/theme-classic/resources/theme-classic-all.css" />
<script type="text/javascript" src="file:///E:/Software/ext-6.2.0-gpl/ext-6.2.0/build/ext-all.js"></script>

<script type="text/javascript">

function onCtrlFoucs(sender){
alert('控件实际Id:'+sender.id+', 控件属性列表中的Id:'+sender.properties[0].value);
}


Ext.onReady(
function(){

Ext.require([
'Ext.String',
]);


//定义一个基类,主要是重用里面的属性和方法
Ext.define('MyCtrlBase', {
extend: 'Ext.panel.Panel',
width: 150,
resizable: true,

properties: [
{ name: 'Id', type: 'text', value: '' },
{ name: 'Caption', type: 'text', value: 'textfield' },
{ name: 'Default', type: 'text', value: '' },
{ name: 'Readonly', type: 'select', value: 'false', values: ['true', false] },
{ name: 'Lookup Calc', type: 'text', value: '' },
{ name: 'Max Length', type: 'number', value: '' }
],

//设置属性的值
setProperty: function (name, value) {
var me = this;
Ext.Array.each(me.properties, function (item) {
if (name == item.name ) {
item.value = value;
}
})
}
});


// 派生出一个新类,定义了事件
Ext.define('MyTextField', {
extend: 'MyCtrlBase',

initComponent: function () {
var me = this;

Ext.applyIf(me, {
items: [{
xtype: 'textfield',
draggable: true,
fieldLabel: 'textfield',
labelAlign: 'top',
listeners: {
focus: function () { me.onFoucs(); }
}
}],
listeners: {
resize: function (sender, w, h, oldw, oldh) {
sender.items.items[0].setWidth(w - 2);
},
},

//获得焦点是,触发。
onFoucs: function () {
me.fireEvent('onFoucs', me);
}
});

me.callParent(arguments);
// 修改属性中id为控件自动生成的ID. ???为什么会修改全部新控件的Id??
//me.setProperty('Id', me.id);
}
});



tmp1 = Ext.create('MyTextField');
tmp1.setProperty('Id', tmp1.id);
tmp1.on({ onFoucs: function (sender) { onCtrlFoucs(sender) } });
tmp1.render(Ext.getBody());

tmp2 = Ext.create('MyTextField');
tmp2.setProperty('Id', tmp2.id);
tmp2.on({ onFoucs: function (sender) { onCtrlFoucs(sender) } });
tmp2.render(Ext.getBody());

}
);
</script>

</head>
<body>

</body>

</html>
...全文

相关推荐

Extjs中文教程

Extjs中文教程

楚兴

EXTJS框架面向对象与继承机制深入解析

本文还有配套的精品资源,点击获取 简介:面向对象编程是JavaScript中的一种设计模式,EXTJS框架提供了强大的UI组件和数据绑定功能,其中面向对象和继承的概念尤为重要。本篇文章深入探讨了EXTJS中的类定义、继承实现、事件系统以及多态等面向对象基础和高级特性,揭示了EXTJS如何通过面向对象和继承机制来实现代码复用和模块化,以及这些机制在实际开发中的应用。 ...

weixin_42601702

EXTJS API 3.3 中文版开发者指南

本文还有配套的精品资源,点击获取 简介:EXTJS API 3.3中文版提供了详细的开发者指导,适用于使用EXTJS 3.3框架的JavaScript程序员。该文档涵盖了EXTJS所有函数、类、方法、属性和事件的详细信息,详细介绍了丰富的用户界面组件如表格、网格和表单等。中文版的API文档让中文开发者能更方便地学习和应用EXTJS库,包括核心类和功能、编程接口的定义以及类的...

黄浴

无废话ExtJs 系列教程十八[继承:Extend]

NULL 博文链接:https://huiqinbo.iteye.com/blog/2219592

weixin_38669628

Extjs学习笔记之八 继承和事件基础

这里接口的意思是Observable实际上起了一个抽象类的作用,Extjs中有大量的组件都是继承自这个类的。这个类提供了一些基本的方法比如addEvents,addlistener,fireEvent等等。本文暂时不介绍如何使用extjs的组件响应事件,而是介绍Extjs的事件的一些实现原理。整个Extjs框架都是以一种面向对象的方式开发的,所以理解Javascript中的继承也很重要。我前面的一篇文章 补点基础:Javascript中的类和闭包 也是为这篇做准备。另外,博客园内还有一个写的很好的系列 JavaScript继承详解. 他主要是根据Douglas Crockford的两篇文章写的

weixin_38702515
评论 2
收藏 已收藏
分享
返回顶部
xymao123
JavaScript 87,983 成员 224,681 内容