Ext.form.Panel - add/edit record with remote store

Code:

Ext.define('DataMine.view.fyc.KarateList', {
    extend: 'Ext.form.Panel',
    alias: 'widget.karatelist',
    frame: true,
    bodyBorder: false,
    border: false,


    defaults: {xtype:'textfield'},
    items: [
        {xtype:'textfield', fieldLabel:'Weight', name:'weight'},
        {xtype:'textfield', fieldLabel:'Height', name:'heightfeet'},
        {
            fieldLabel:'Belt Size', xtype:'combobox', name:'beltsize',
            store: [['0','0'],['00','00'],['000','000'],['1','1'],['2','2'],['3','3'],['4','4'],['5','5'],['6','6'],['7','7'],['8','8'],['9','9'],['10','10']]
        },
        {
            fieldLabel:'Gi Size', xtype:'combobox', name:'gisize',
            store: [['0','0'],['00','00'],['000','000'],['1','1'],['2','2'],['3','3'],['4','4'],['5','5'],['6','6'],['7','7'],['8','8'],['9','9'],['10','10']]
        },
        {
            fieldLabel:'Current Rank', xtype:'combobox', forceSelection: true, name:'currentrank',
            store: [['White','White'],['Yellow','Yellow'],['Orange','Orange'],['Green','Green'],['Blue','Blue'],['Purple','Purple'],
                    ['3rd Brown','3rd Brown'],['2nd Brown','2nd Brown'],['1st Brown','1st Brown'],['1st Black','1st Black'],
                    ['2nd Black','2nd Black'],['3rd Black','3rd Black'],['4th Black','4th Black'],['5th Black','5th Black'],
                    ['6th Black','6th Black'],['7th Black','7th Black'],['8th Black','8th Black'],['9th Black','9th Black'],['10th Black','10th Black']
            ]
        },
        {fieldLabel:'Date Earned', name:'dateearned', xtype:'datefield', format:DataMine.datetimeFormat, submitFormat:'m/d/Y h:i:a'},
        {
            fieldLabel:'Next Rank', xtype:'combobox', forceSelection: true, name:'nextrank',
            store: [['White','White'],['Yellow','Yellow'],['Orange','Orange'],['Green','Green'],['Blue','Blue'],['Purple','Purple'],
                    ['3rd Brown','3rd Brown'],['2nd Brown','2nd Brown'],['1st Brown','1st Brown'],['1st Black','1st Black'],
                    ['2nd Black','2nd Black'],['3rd Black','3rd Black'],['4th Black','4th Black'],['5th Black','5th Black'],
                    ['6th Black','6th Black'],['7th Black','7th Black'],['8th Black','8th Black'],['9th Black','9th Black'],['10th Black','10th Black']
            ]
        },
        {fieldLabel:'Next Test Date', name:'testdate', xtype:'datefield', format:DataMine.datetimeFormat, submitFormat:'m/d/Y h:i:a'},
        {
            fieldLabel:'Earned', xtype:'combobox', forceSelection: true, name:'earned',
            store: [['No','No'],['Yes','Yes']
            ]
        },
        {
            fieldLabel:'Semester Fee', xtype:'combobox', forceSelection: true, name:'semesterfee',
            store: [['Due','Due'],['Paid','Paid'],['Waived','Waived']
            ]
        },
        {
            fieldLabel:'Test Fee', xtype:'combobox', forceSelection: true, name:'testfee',
            store: [['Due','Due'],['Paid','Paid'],['Waived','Waived']
            ]
        }
    ],


    buttonAlign:'center',
    buttons: [
        {text:'Edit', itemId:'edit', width:70, handler:function(btn){
            var form = this.up('form');
            var fields = form.query('textfield');
            Ext.Array.each(fields,function(field) {
                field.setReadOnly(false);
            });
            this.hide();
            form.down('#save').show();
        }},
        {text:'Save', itemId:'save', width:70, hidden:true, handler:function(btn){
            var form = this.up('form');
            form.updateRecord();
            var rec = form.getRecord();
            rec.save();
            var fields = form.query('textfield');
            Ext.Array.each(fields,function(field) {
                field.setReadOnly(true);
            });
            btn.hide();
            form.down('#edit').show();
        }},
        {text:'Close', width:70, handler:function(btn){
            var panel = this.up('form').up('panel').up('panel');
            panel.close();
        }}
    ],


    initComponent: function() {
        this.callParent(arguments);
        console.log('DataMine.view.fyc.KarateList.initComponent()\t this.record=%o', this.record);


        var karaterec = Ext.getStore('Karate').findRecord('personid', this.record.get('id'));
        if(karaterec) this.loadRecord(karaterec);


        this.on('render', function() {
            console.log('DataMine.view.fyc.KarateList::render\t this=%o', this);
            var fields = this.query('textfield');
            Ext.Array.each(fields,function(field) {
                field.setReadOnly(true);
            });
        });
    }
});

Code:

Ext.define('DataMine.model.Karate', {
    extend: 'Ext.data.Model',
    fields: [
        {name:'id',                mapping:'KarateID',            type:'int'},
        {name:'personid',        mapping:'PersonID',            type:'int'},
        {name:'weight',            mapping:'Weight',            type:'int'},
        {name:'heightfeet',        mapping:'HeightFeet',        type:'string'},
        {name:'beltsize',        mapping:'BeltSize',            type:'int'},
        {name:'gisize',            mapping:'GiSize',            type:'int'},
        {name:'currentrank',    mapping:'CurrentRank',        type:'string'},
        {name:'dateearned',        mapping:'DateEarned',        type:'date', dateFormat:'Y-m-d H:i:s'},
        {name:'nextrank',        mapping:'NextRank',            type:'string'},
        {name:'testdate',        mapping:'TestDate',            type:'date', dateFormat:'Y-m-d H:i:s'},
        {name:'earned',            mapping:'Earned',            type:'string'},
        {name:'semesterfee',    mapping:'SemesterFee',        type:'string'},
        {name:'testfee',        mapping:'TestFee',            type:'string'}
        
    ],
    idProperty:'id',
    proxy: {
        type: 'direct',
        reader: {
            root: 'data',
            totalProperty: 'total'
        },
        api: {
            create:  DataMine.Direct.Karate.create,
            read:     DataMine.Direct.Karate.read,
            update:     DataMine.Direct.Karate.update,
            destroy: DataMine.Direct.Karate.delete
        }
    }
});