PDA

View Full Version : my ext.ux: NO_MODIFICATION_ALLOWED_ERR: DOM Exception 7 error in webkit



franck34
5 May 2010, 6:29 AM
I was just writing a little extension to display a combo with "yes" and "no" inside, having different color for "yes" and "no" and i'm now fighting with a bug i don't really understand.

When rending, webkit console show this error:


NO_MODIFICATION_ALLOWED_ERR: DOM Exception 7 error. An attempt was made to modify an object where modifications are not allowedIf i remove the code below, the error no longer appear.


config.tpl='<tpl for=".">'
+ '<div class="x-combo-list-item '
+ this.clsName +'{color}">'
+ '{' + config.displayField + '}'
+ '</div></tpl>';
Notice the extension is probably badly written, i'm a noob regarding that, so all ideas to refactore that better are welcome.

You can test here :

http://innovacode.com/extjs/combocolor/



Below the full code:

------------
combosimple.js


Ext.ux.comboSimple = Ext.extend(Ext.form.ComboBox, {

data:[],

initConfig:function() {
var config={};
var d;
if (!this.initialConfig.data) {
d=this.data;
} else {
d=this.initialConfig.data;
}
config.triggerAction='all';
config.mode='local';
config.single=true;
config.allowBlank=false;
config.width='100%';
config.displayField='txt';
config.valueField='id';
config.hiddenName=this.initialConfig.name;
config.editable=false;
config.store={
xtype:'arraystore',
fields:['id','txt','color'],
data:d
};
config.listeners={
render:function() {
this.store.ownerCmp=this;
}
}
return config;
},

initComponent: function() {
var config=this.initConfig();
Ext.apply(this, Ext.applyIf(this.initialConfig, config));
Ext.ux.comboSimple.superclass.initComponent.apply(this, arguments);
}
});
Ext.reg('combosimple', Ext.ux.comboSimple);

Ext.ux.comboYesNoColor = Ext.extend(Ext.ux.comboSimple, {
data:[['1','Oui','green'],['0','Non','red']],
clsName:'x-comboyesno-item-',
initComponent: function() {
var config=this.initConfig();
config.tpl='<tpl for=".">'
+ '<div class="x-combo-list-item '
+ this.clsName +'{color}">'
+ '{' + config.displayField + '}'
+ '</div></tpl>';
Ext.apply(this, Ext.applyIf(this.initialConfig, config));
//Ext.ux.comboSimple.superclass.initComponent.apply(this, arguments);
Ext.ux.comboYesNoColor.superclass.initComponent.apply(this, arguments)
},
setColor:function() {
for (var i=0;i<this.data.length;i++) {
var o=this.data[i][2];
this.el.removeClass(this.clsName+o);
this.wrap.removeClass(this.clsName+o);
}
if (this.getValue()!='') {
var rec = this.store.query(this.valueField, this.getValue()).itemAt(0);
if (!rec) return;
if(rec.data.id=='1'||rec.data.id=='0') {
var c=rec.get('color');
this.el.addClass(this.clsName+c);
this.wrap.addClass(this.clsName+c);
}
}
},
setValue: function(value) {
Ext.ux.comboYesNoColor.superclass.setValue.call(this, value);
this.setColor();
}
});
Ext.reg('comboyesnocolor', Ext.ux.comboYesNoColor);
-------------
And the index.html:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ExtJS basic combo like html select </title>

<link rel="stylesheet" type="text/css" href="/extjs/ext-3.2.1/resources/css/ext-all.css"/>

<script type="text/javascript" src="/extjs/ext-3.2.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/extjs/ext-3.2.1/ext-all-debug.js"></script>
<script type="text/javascript" src="combosimple.js"></script>

<style type="text/css">

.x-comboyesno-item-green {
background-color:#94ef94 !important;
}

.x-comboyesno-item-red {
background-color:#ff5b5b !important;
}
</style>
<script type="text/javascript">

Ext.onReady(function() {
var p=new Ext.ux.comboYesNoColor({
fieldLabel:'Are you serious'
});

new Ext.FormPanel({
title:'my FormPanel',
renderTo:'search',
height:100,
width:400,
items:[p]
});
});
</script>
</head>
<body style="padding:50px;">
<h1>WebKIT Error: NO_MODIFICATION_ALLOWED_ERR: DOM Exception 7: An attempt was made to modify an object where modifications are not allowed</h1>
Source: <a href="combosimple.js">combosimple.js</a><br/><br/>
<br/>
<div id="search">
</div>
<br/>
Below the error shown in google chrome console:<br/>
<img src="error.png"/>
</body>
</html>