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

i trying build first store proxy app. have json file employees.json 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 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 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 empty store     empstore = ext.create('basicapp.classes.employeestore');     // loading store json file through 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();          // testing         console.log("after sync: ");         console.log(empstore);          clearallfields(); // clears form fields          ext.get('display').update('new model added store. total models:' + empstore.getcount()); } 

i did lot of console.log testing between store.add , store.sync calls , found:

1. add() method store not adding record / main properties of newly created model in store same first record (which loaded in beginning json file) / basically, first getting duplicated in last record.

2. however, further dug console.log output , found out newly entered data in fact present in model; instead there in raw option

i new extjs , therefore can't understand internals. i'm guessing data being written store raw json , not model. why so? getting wrong here? supposed more after adding? maybe add code in model?

edit: updated store. autoload not true.

edit 2: model miss constructor? how 'add' construct model added store?

you can use store.loadrawdata(). use configured proxy, mapping settings, etc in model / store.

extracted documentation:

loadrawdata( data, [append] ) : boolean     

loads data via bound proxy's reader

use method if attempting load data , want utilize  configured data reader.