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

xymao123 2020-07-15 08:36:59

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>

...全文

7330 2 打赏收藏举报

写回复

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

xymao123 2020-07-17

参考了这个链接：https://www.iteye.com/blog/huiqinbo-2219592

打赏
举报

回复赞

xymao123 2020-07-17

修改基类的的定义，initComponent 方法中定义需要扩展的属性。

Ext.define('MyCtrlBase', {
extend: 'Ext.panel.Panel',
width: 150,
resizable: true,

initComponent: function () {
var me = this;
me.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: '' }
];

me.callParent(arguments);
},

//设置属性的值
setProperty: function (name, value) {

Ext.Array.each(this.properties, function (item) {
if (name == item.name) {
item.value = value;
}
})
}
});