0

我正在尝试使用代理应用程序构建我的第一个商店。我有一个 JSON 文件Employees.json 如下：

{
    "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"
        }
    ]
}

我的店铺如下：

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. ");
                }
});

我的模特

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;
    }
});

我的 App.js（相关部分）

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());
}

我在和调用之间做了很多console.log测试，这就是我发现的：store.addstore.sync

  1. 商店的 add() 方法没有正确添加记录/商店中新创建的模型的所有主要属性都与我的第一条记录相同（从 JSON 文件开始加载）/基本上，第一个是在最后一条记录中重复。

  2. 但是，我进一步深入研究了我的console.log输出，发现新输入的数据实际上存在于模型中；相反，它在raw选项中

我是 ExtJS 的新手，因此不能理解很多内部结构。但我猜数据是作为原始 json 而不是模型写入商店的。为什么会这样？我在这里有什么问题吗？添加后我应该做更多的事情吗？也许在模型中添加一些代码？

编辑：更新的商店。自动加载不正确。

编辑 2：我的模型是否错过了构造函数？“添加”如何构建要添加到商店的模型？

4

1 回答 1

1

您可以使用 store.loadRawData()。这将使用您在模型/存储中配置的代理、映射设置等。

从文档中提取：

loadRawData( data, [append] ) : Boolean

通过绑定代理的阅读器加载数据

Use this method if you are attempting to load data and want to utilize the 
configured data reader.
于 2014-09-22T16:02:53.463 回答