ExtJS 4 combobox problem.js

gistfile1.json

    Ext.define('Writer.Form', {
        extend:'Ext.form.Panel',
        alias:'widget.writerform',

        requires:['Ext.form.field.Text'],

        initComponent:function () {
            this.addEvents('create');
            Ext.apply(this, {
                activeRecord:null,
                iconCls:'icon-user',
                frame:false,
                bodyStyle:'background-color:#dfe8f5;', // for blue background then no frame ToDO: harcoded style
                header:false,
                defaultType:'textfield',
                bodyPadding:5,
                fieldDefaults:{
                    anchor:'100%',
                    labelAlign:'right',
                    labelWidth:125,
                    msgTarget:'side',
                    autoFitErrors:false
                },
                listeners:{
                    'validitychange':function (th, isvalid, eOpts) {
                        if (isvalid) {
                            this.down('#save').enable();
                        }
                        else {
                            this.down('#save').disable();
                        }
                    }
                },
                items:[
                    {
                        fieldLabel:'Domain Name',
                        name:'domain_name',
                        width:80,
                        vtype:'hostname',
                        allowBlank:false
                    },
                    {
                        fieldLabel:'Alias',
                        name:'alias',
                        vtype:'hostname',
                        width:80,
                        allowBlank:false
                    },
                    {
                        fieldLabel:'Admin Email',
                        name:'admin_email',
                        allowBlank:false,
                        vtype:'email'
                    },
                    {
                        fieldLabel:'Index page',
                        width:80,
                        name:'index_page'
                    },
                    {
                        allowBlank:false,
                        xtype:'combobox',
                        fieldLabel:'IP',
                        width:80,
                        bodyPadding:'0 0',
                        name:'ip',
                        store:ip_storage,
                        queryMode:'local',
                        editable:false,
                        displayField:'ip',
                        valueField:'ip',
                        autoSelect:true
                    },
                    {
                        fieldLabel:'PHP',
                        xtype:'checkbox',
                        name:'php'
                    },
                    {
                        autoSelect:true,
                        xtype:'combobox',
                        fieldLabel:'Charset',
                        width:80,
                        bodyPadding:'0 0',
                        name:'charset',
                        store:charset_storage,
                        queryMode:'local',
                        displayField:'name',
                        valueField:'name',
                        value:'UTF-8'
                    }
                ],
                dockedItems:[
                    {
                        xtype:'toolbar',
                        dock:'bottom',
                        ui:'footer',
                        items:['->', {
                            iconCls:'icon-save',
                            itemId:'save',
                            text:'Save',
                            disabled:true,
                            scope:this,
                            handler:this.onSave
                        }, /*{
                         iconCls:'icon-user-add',
                         text:'Create',
                         scope:this,
                         handler:this.onCreate
                         },*/ {
                            iconCls:'icon-reset',
                            text:'Reset',
                            scope:this,
                            handler:this.onReset
                        }]
                    }
                ]
            });
            this.callParent();
        },

        setActiveRecord:function (record) {
            this.activeRecord = record;
            if (record) {
                this.down('#save').enable();
                this.getForm().loadRecord(record);
            } else {
                this.down('#save').disable();
                this.getForm().reset();
            }
        },

        onSave:function () {
            var active = this.activeRecord,
                form = this.getForm();

            if (!active) {
                return;
            }
            if (form.isValid()) {
                form.updateRecord(active);
                this.onReset();
            }
            Ext.getCmp('formWindow').close();

        },

        onCreate:function () {
            var form = this.getForm();

            if (form.isValid()) {
                this.fireEvent('create', this, form.getValues());
                form.reset();
                Ext.getCmp('formWindow').close();
            }

        },

        onReset:function () {
            this.setActiveRecord(null);
            this.getForm().reset();
        }
    });