extjs4网格简单示例，但错误：未定义的“项目”

Question

I have been practicing to make a really simple grid example on JSFiddle, I've stuck in this problem.

I have 1 model, 1 store, and 1 grid object. I think I put everything properly into appropriate spaces, but all I got from the result was 'Cannot read property "items" of undefined', can anyone please explain why this happens to me, please?

 var model = Ext.create('Ext.data.Model', { fields: [ {name: 'name', type: 'string'}, {name: 'value', type: 'float'} ] }); var store = Ext.create('Ext.data.Store', { model: model, data: [ {name: 'a', value: 1.2}, {name: 'b', value: 2.3}, {name: 'c', value: 3.4}, {name: 'd', value: 4.5}, ] }); Ext.create('Ext.grid.Panel', { width: 500, height: 500, store: store, columns: [ {text: 'header', dataIndex: 'name'}, {text: 'header2', dataIndex: 'value'} ], renderTo: Ext.getBody() }) 

Answer 1

'Create' creates an instance of the parent element.Hence need to define model,before creating instances of it.

Ext.define('occupationModel', {
    extend: 'Ext.data.Model',

    fields: [
        {name: 'code', type: 'int'},
        {name: 'occup', type: 'string'}
    ]
});

Ext.create('occupationModel', {
    code : 1,
    occup : 'foo'
});

Answer 2

If you are using JSFiddle then you need to include ExtJS all required libraries like

1. ext-all-debug.js as per depend on your requirement you can change version of ExtJS library.
2. ext-theme-neptune only for theme what you want to use you can change.
3. ext-theme-neptune-all-debug only for theme what you want to use you can change.

Here in JSFiddle I have created an demo you check here how it is working. Hope this will help you.

Ext.create('Ext.data.Store', {
    storeId:'simpsonsStore',
    fields:['name', 'email', 'phone'],
    data:{'items':[
        { 'name': 'Lisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224"  },
        { 'name': 'Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234" },
        { 'name': 'Homer', "email":"homer@simpsons.com",  "phone":"555-222-1244"  },
        { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254"  }
    ]},
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            rootProperty: 'items'
        }
    }
});

Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    columns: [
        { text: 'Name',  dataIndex: 'name' },
        { text: 'Email', dataIndex: 'email', flex: 1 },
        { text: 'Phone', dataIndex: 'phone' }
    ],
    height: 200,
    width: '100%',
    renderTo: Ext.getBody()
});

You can also check here working Sencha Fiddle .

Answer 3

Solution for your problem is to change your model with below code.

 Ext.define('model', { extend: 'Ext.data.Model', fields: [ {name: 'name', type: 'string'}, {name: 'value', type: 'float'} ] }); 

Also, click on link to know more about, Differences between Ext.create() and Ext.define()