请教关于extjs的类继承中复杂数据类型继承的问题
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>