Question

我创建了一个简单的应用程序，它从json商店加载数据并将其绘制在屏幕上。我需要做的是添加到客户端的商店（我不控制源数据）。所以，在商店加载：funciton（）或MainController中，如果还不晚，我想在开头插入几行，这样这些记录出现在之前 John，Paul，George，和林戈。我已经包含了所有的Javascript，因此代码已经完成。

enter image description here

EmployeeModel：

Ext.define('Sencha.model.Employee', {
    extend: 'Ext.data.Model',

    config: {
        fields: [
            {name: 'firstName', type: 'string'},
            {name: 'lastName', type: 'string'},
            {
                name: 'fullName',
                type: 'string',
                convert: function (value, record) {

                    firstName = record.data.firstName;
                    lastName = record.data.lastName;
                    fullName = firstName + " " + lastName;
                    return fullName;
                }
            }
        ]
    },
    load: function () {
        console.log("Employee model");
        this.callParent(arguments);
    }
});

EmployeeStore：

Ext.define('Sencha.store.EmployeeStore', {
    extend: 'Ext.data.Store',

    requires: [],

    config: {
        model: 'Sencha.model.Employee',
        autoLoad: true,
        defaultRootProperty: 'items',

        proxy: {
            type: 'ajax',
            url: 'employees.json',
            reader: {
                type: 'json',
                rootProperty: 'items'
            }
        }
    },

    load: function () {
        console.log("EmployeeStore");

        this.callParent(arguments);
    }
});

控制器:(试图获取商店并打印值）

Ext.define('Sencha.controller.MainController', {
    extend: 'Ext.app.Controller',

    requires: [],

    config: {

    },
    launch: function () {
        console.log("Main Controller...");
        var empStore = Ext.getStore('EmployeeStore');
        console.log(empStore.length);
        empStore.each(function (val) {  // Not working
            var firstName = val.get('firstName');
            console.log(firstName);
        });


    }
});

app.js：

Ext.Loader.setConfig({enabled: true});

Ext.application({
    name: "Sencha",

    models: ['Employee'],
    stores: ['EmployeeStore'],
    views: [],
    controllers: ['MainController'],

    launch: function () {
    console.log("Launching");

    var aList = Ext.create("Ext.List", {
        fullscreen: true,
        store: 'EmployeeStore',
        itemTpl: "{lastName}, {firstName} - {fullName}"
    });
        Ext.Viewport.add(aList);
    }
});

employees.json：

{"items": [
    { "firstName": "John", "lastName": "Lennon" },
    { "firstName": "Paul", "lastName": "McCartney" },
    { "firstName": "George", "lastName": "Harrison" },
    { "firstName": "Ringo", "lastName": "Starr" }
]}

Answer 1

从商店中取出autoload，在启动功能中加载商店，然后使用回调添加记录：

launch: function () {
    var empStore = Ext.getStore('EmployeeStore');
    empStore.load(function() {
        empStore.insert(0, [ /*records to insert*/ ]);
    });
}

加载商店后立即将数据插入商店？

1 个答案: