extjs 4.2 - add() method in Store adding new model as RAW and NOT as a MODEL - error or bug?

Question

I am trying to build my first Store with Proxy app. I have a JSON file Employees.json as follows:

{
    "employees": [
        {
            "eid":608534,
            "ename":"Navin Israni",
            "eibu":"EnR",
            "eprojcode":"jee_pun2",
            "doj":"12-07-2012"
        },
        {
            "eid":608535,
            "ename":"Rohit Iyengar",
            "eibu":"MOBL",
            "eprojcode":"MOBL_HYD",
            "doj":"08-08-2012"
        },
        {
            "eid":608536,
            "ename":"Akshata Joshi",
            "eibu":"ECS",
            "eprojcode":"ECS_MNG",
            "doj":"20-09-2012"
        }
    ]
}

my store is as follows:

Ext.define("BasicApp.classes.EmployeeStore",{
    extend: 'Ext.data.Store',
     model:'BasicApp.classes.EmployeeModel',
     proxy:
             {
         type:'ajax',
//         url:'Employees.json',
         reader:
                 {
             type:'json',
             root:'employees'
                 },
         writer:
                 {
             type:'json',
             root:'employees'
                 }
             },
        listeners:
                {

            load: function(store,records,options)
            {
                console.log("The store has been loaded:");
                console.log(records);
            },
            beforesync: function(options, eOpts)
            {
                console.log("The store is being synched. Please wait...");
            }       
         },

         afterRequest: function(store, operation, eOpts)
                {
                          console.log("The store has been synched. ");
                }
});

My Model

Ext.define("BasicApp.classes.EmployeeModel",{
    extend: 'Ext.data.Model',

    fields:
            [
        {name:'eid', type: 'int', defaultValue: 9999},
        {name:'ename', type: 'string'},
        {name:'eibu', type: 'string', defaultValue: 'N/A'},
        {name:'eprojcode', type: 'string', defaultValue: 'N/A'},
        {name:'doj', type: 'date'}
            ],




    printDetails: function()
    {
        var str="Emp Id: " + this.get('eid');
        str+= "<br/> Emp Name: " + this.get('ename');
        str+= "<br/> Emp IBU: " + this.get('eibu'); 
        str+= "<br /> Emp Project Code: " +this.get('eprojcode');
        str+= "<br /> Date of Joining: " +this.get('doj');

        return str;
    }
});

My App.js (concerned part)

Ext.application(
{
    name:"BasicApp",
    appFolder:"ModelStoreProxy"
}
);


Ext.onReady(function(){

    Ext.get('newbtn').on('click',newEmployee);
    Ext.get('savebtn').on('click',saveEmployee);
    Ext.get('showallbtn').on('click',showAll);

    // creating a empty store
    empStore = Ext.create('BasicApp.classes.EmployeeStore');
    // loading the store from JSON file through an AJAXProxy
    empStore.proxy.url='Employees.json';
    empStore.load(function(){
        showAll();
    });    
});

function showAll()
{

    console.log('showAll: store size: '+empStore.getCount());
    Ext.get('display').dom.innerHTML = "";

        empStore.each(function(item){

            console.log(item);
            Ext.get('display').dom.innerHTML += item.printDetails() + "<br/>-----<br/>"; 
        });

};

var empStore;

function saveEmployee(e,t,eOps)
{
    alert("empid:"+Ext.get('empid').dom.value);
    alert("empname:"+Ext.get('empname').dom.value);
    alert("empibu:"+Ext.get('empibu').dom.value);
    alert("emppc:"+Ext.get('emppc').dom.value);
    alert("empdoj:"+Ext.get('empdoj').dom.value);

    var newlyAddedRecord = {
            eid: parseInt(Ext.get('empid').dom.value),
            ename:Ext.get('empname').dom.value,
            eibu:Ext.get('empibu').dom.value,
            eprojcode:Ext.get('emppc').dom.value,
            doj:new Date(Ext.get('empdoj').dom.value)
        }; 


        empStore.add(newlyAddedRecord);
        // More testing done here
        empStore.sync();

        // For testing
        console.log("After sync: ");
        console.log(empStore);

        clearAllFields(); // clears all form fields

        Ext.get('display').update('New Model added to the Store. Total Models:' + empStore.getCount());
}

I did a lot of console.log testing between store.add and store.sync calls and this is what I found:

1. add() method with the store is not adding the record properly / all the main properties of the newly created model in the store are SAME AS my first record (which was loaded in the beginning from the JSON file) / basically, the first is getting duplicated in the last record.

2. HOWEVER, I further dug into my console.log output and found out that the newly entered data IS in fact PRESENT in the model; it is instead there in the raw option

I am new to ExtJS and therefore can't understand much internals. But I'm guessing the data is being written into the store as raw json and not as a model. Why is this so? Am I getting anything wrong here? Am I supposed to do anything more after adding? Maybe add some code in Model?

EDIT: updated store. autoLoad is not true.

EDIT 2: Does my model miss the constructor? How does 'add' construct the model to be added to the store?

Answer 1

You can use store.loadRawData(). This will use your configured Proxy, the mapping settings, etc in the Model / Store.

Extracted from documentation:

loadRawData( data, [append] ) : Boolean    

Loads data via the bound Proxy's reader

Use this method if you are attempting to load data and want to utilize the 
configured data reader.