Ext.form.ColorField = function(config){
    Ext.form.ColorField.superclass.constructor.call(this, config);
};
 
Ext.extend(Ext.form.ColorField, Ext.form.TriggerField,  {
    /**
     * @cfg {String} invalidText
     * The error to display when the color in the field is invalid (defaults to
     * '{value} is not a valid color - it must be in the format {format}').
     */
    invalidText : "{0} is not a valid color - it must be in a the hex format {1}",
    /**
     * @cfg {String} triggerClass
     * An additional CSS class used to style the trigger button.  The trigger will always get the
     * class 'x-form-trigger' and triggerClass will be <strong>appended</strong> if specified (defaults to 'x-form-color-trigger'
     * which displays a color wheel icon).
     */
    triggerClass : 'x-form-color-trigger',
    /**
     * @cfg {String/Object} autoCreate
     * A DomHelper element spec, or true for a default element spec (defaults to
     * {tag: "input", type: "text", size: "10", autocomplete: "off"})
     */
 
    // private
    defaultAutoCreate : {tag: "input", type: "text", size: "10", maxlength: "7", autocomplete: "off"},
 
    // Limit input to hex values
    maskRe: /[#a-f0-9]/i,
    regex: /[#a-f0-9]/i,
 
    // private
    validateValue : function(value){
        if(!Ext.form.ColorField.superclass.validateValue.call(this, value)){
            return false;
        }
        if(value.length &lt; 1){ // if it's blank and textfield didn't flag it then it's valid
             return true;
        }
 
        var parseOK = this.parseColor(value);
 
        if(!value || (parseOK == false)){
            this.markInvalid(String.format(this.invalidText, value, '#AABBCC'));
            return false;
        }
 
        return true;
    },
 
    // private
    // Provides logic to override the default TriggerField.validateBlur which just returns true
    validateBlur : function(){
        return !this.menu || !this.menu.isVisible();
    },
 
    /**
     * Returns the current value of the color field
     * @return {String} value The color value
     */
    getValue : function(){
        return Ext.form.ColorField.superclass.getValue.call(this) || "";
    },
 
    /**
     * Sets the value of the color field.  You can pass a string that can be parsed into a valid HTML color
     * @param {String} color The color string
     */
    setValue : function(color){
        Ext.form.ColorField.superclass.setValue.call(this, this.formatColor(color));
    },
 
    // private
    parseColor : function(value){
	this.colorbox.setStyle('background', value);
	return (!value || (value.substring(0,1) != '#')) ?
		false : true;
    },
 
    // private
    formatColor : function(value){
	if (value &amp;&amp; (this.parseColor(value) == false)) {
		value = '#' + value;
	}
	this.colorbox.setStyle('background', value);
 
        return value;
    },
 
    // private
    menuListeners : {
        select: function(e, c){
            this.setValue(c);
        },
        show : function(){ // retain focus styling
            this.onFocus();
        },
        hide : function(){
            this.focus();
            var ml = this.menuListeners;
            this.menu.un("select", ml.select,  this);
            this.menu.un("show", ml.show,  this);
            this.menu.un("hide", ml.hide,  this);
        }
    },
 
    // private
    // Implements the default empty TriggerField.onTriggerClick function to display the ColorPalette
    onTriggerClick : function(){
        if(this.disabled){
            return;
        }
        if(this.menu == null){
            this.menu = new Ext.menu.ColorMenu();
        }
 
        this.menu.on(Ext.apply({}, this.menuListeners, {
            scope:this
        }));
 
        this.menu.show(this.el, "tl-bl?");
    },
	//private
	onRender : function(ct, position){
        Ext.form.ColorField.superclass.onRender.call(this, ct, position);
        this.colorbox = this.container.createChild({tag: "div", style:"padding:0;margin:0;border: 1px solid;margin-right:3px;background: #fff;float:left;height: 12px;width: 12px;position:relative;top:3px;"},this.el.dom);
    },
	//private
	//set new width
	adjustWidth : function(tag, w){
        if(typeof w == 'number' &amp;&amp; (Ext.isIE &amp;&amp; (Ext.isIE6 || !Ext.isStrict)) &amp;&amp; /input|textarea/i.test(tag) &amp;&amp; !this.inEditor){
            return w - 3;
        }
        return (w-17);
    }
 
});
 
Ext.reg('color', Ext.form.ColorField);

 <script src="/libraries/extjs/adapter/ext/ext-base.js" type="'text/javascript'"><!--mce:0--></script>
 <script src="/libraries/extjs/ext-all.js" type="'text/javascript'"><!--mce:1--></script>
 <!--Interface classes-->
 <script src="/app/lib/app.js" type="'text/javascript'"><!--mce:2--></script>
 <script src="/app/lib/module.js" type="'text/javascript'"><!--mce:3--></script>
 <!--Application classes-->
 <script src="/app/application.js" type="'text/javascript'"><!--mce:4--></script>
 <script src="/app/modules/tasks.js" type="'text/javascript'"><!--mce:5--></script>

App = function(cfg){
    Ext.apply(this, cfg);
    this.addEvents({
        'ready' : true,
        'beforeunload' : true
    });
 
    Ext.onReady(this.initApp, this);
};
 
Ext.extend(App, Ext.util.Observable, {
 
    isReady: false,
    modules: {},
 
    initApp : function(){
 
        //Modules must add themself to application
        this.init();
 
		this.initModules();
 
        Ext.EventManager.on(window, 'beforeunload', this.onUnload, this);
		this.fireEvent('ready', this);
        this.isReady = true;
 
    },
 
    getModules : function(){
		return this.modules;
	},
 
    init : Ext.emptyFn,
 
    initModules : Ext.emptyFn,
 
    start : Ext.emptyFn,
 
	addModule : function(module) {
		this.modules[module.id] = module;
	},
 
    getModule : function(id){
    	var ms = this.modules;
 
    	if(ms[id]) return ms[id];
 
        return false;
    },
 
    onReady : function(fn, scope){
        if(!this.isReady){
            this.on('ready', fn, scope);
        }else{
            fn.call(scope, this);
        }
    },
 
	onUnload : function(e){
        if(this.fireEvent('beforeunload', this) === false){
            e.stopEvent();
			this._desctruct();
        }
    },	
 
	_desctruct : function(){
 
    }
});

App.Module = function(cfg){
    Ext.apply(this, cfg);
    App.Module.superclass.constructor.call(this);
    this.addEvents({
        'ready' : true,
        'beforeunload' : true
    });
}
 
Ext.extend(App.Module, Ext.util.Observable, {
 
	id : '',						// linking name in Application
	title : '',
	description : '',
	icoCls : '', 					// used for button
	logoCls : '', 					// used for logo	
 
	app : null,						//backlink to Application
 
    init : Ext.emptyFn,
 
	start : Ext.emptyFn,
 
	onReady : function(fn, scope){
        if(!this.isReady){
            this.on('ready', fn, scope);
        }else{
            fn.call(scope, this);
        }
    },
 
	onUnload : function(e){
        if(this.fireEvent('beforeunload', this) === false){
            e.stopEvent();
			this._desctruct();
        }
    },	
 
	_destruct : Ext.emptyFn
 
});

Application = new App({
 
	init :function(){
		Ext.QuickTips.init();
		console.log('Application started');
	},
 
	initModules : function(){
		for(var i in this.modules){
            var m = this.modules[i];
            m.app = this;  //backlink
			m.init();
        }
		this.start();
		this.isReady = true;
    },
 
	start : function(){
		this.getModule('tasks').start();
	}
 
});

Application.Tasks = function(cfg){
    Ext.apply(this, cfg);
    Application.Tasks.superclass.constructor.call(this);
    Application.addModule(this);
}
 
Ext.extend(Application.Tasks, App.Module, {
 
	id : 'tasks',							// linking name in Application
	title : 'Tasks',
	description : 'Task for managment',
	icoCls : 'task-ico', 					// used for button
	logoCls : 'task-logo', 					// used for logo	
 
    init : function(){
 
	},
 
	start : function(){
		console.log('Tasks started');
	},
 
	_destruct : Ext.emptyFn
 
});
new Application.Tasks();