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:

Code:
NO_MODIFICATION_ALLOWED_ERR: DOM Exception 7 error. An attempt was made to modify an object where modifications are not allowed
If i remove the code below, the error no longer appear.
Code:
       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
Code:
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:
Code:
<!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>