extjs4網格簡單示例，但錯誤：未定義的“項目”

Question

我一直在嘗試在JSFiddle上做一個非常簡單的網格示例，但我一直陷在這個問題中。

我有1個模型，1個商店和1個網格對象。 我認為我已將所有內容正確放置在適當的位置，但從結果中得到的只是“無法讀取未定義的屬性“項目””，任何人都可以解釋一下為什么會發生在我身上嗎？

 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

'創建'創建父元素的實例。因此需要在創建模型之前定義模型。

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

如果您使用的是JSFiddle，則需要包括ExtJS所有必需的庫，例如

1. 根據您的要求， ext-all-debug.js可以更改ExtJS庫的版本。
2. ext-theme-neptune僅適用於您想要使用的主題，您可以更改。
3. ext-theme-neptune-all-debug僅適用於您要使用的主題，可以更改。

在JSFiddle中，我創建了一個演示，您可以在此處查看其工作方式。 希望這會幫助你。

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

您也可以在這里檢查Sencha Fiddle 。

Answer 3

解決您的問題的方法是使用以下代碼更改模型。

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

另外，單擊鏈接以了解更多有關Ext.create（）和Ext.define（）之間的區別的信息。