Sencha ExtJS empty grid rows

Question

I have followed the examples and set up an MVC style app with a grid which gets its data from an array in the store.

When the grid is rendered, the columns are displayed but the rows are empty. There are always as many empty rows as there are records in the store data array, but the fields are blank.

Here is my view

Ext.define('MyLodge.view.content.MemberGrid', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.membergrid',

    initComponent: function(){

        var store = Ext.create('MyLodge.store.Members');

        Ext.apply(this, {
            height: this.height,
            store: store,
            stripeRows: true,
            columnLines: true,
            columns: [{
                id       :'name',
                text   : 'Name',
                flex: 1,
                sortable : true,
                dataIndex: 'name'
            },{
                text   : 'E-Mail',
                width    : 150,
                sortable : true,
                dataIndex: 'email'
            },{
                text   : 'Href',
                width    : 200,
                sortable : true,
                dataIndex: 'href'
            }]
        });

        this.callParent(arguments);
    }
});

Here is my model:

Ext.define('MyLodge.model.Member', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'name'},
        {name: 'email'},
        {name: 'href'}
    ]
});

Here is my store:

Ext.define('MyLodge.store.Members', {
    extend: 'Ext.data.ArrayStore',
    model: 'MyLodge.model.Member',
    data: [
           {name: 'Kevin Lippiatt', email: '[email protected]', href: 'http://blah.com/kevin'},
           {name: 'Phillip Morris', email: '[email protected]', href: 'http://blah.com/phillip'},
           {name: 'A N Other', email: '[email protected]', href: 'http://blah.com/other'}
    ]
});

I get three blank rows in the grid.

Johan Haest Johan Haest · Accepted Answer · 2013-02-21T11:10:46

Your store should extend from Ext.data.Store not ArrayStore

Here's a fiddle:

http://jsfiddle.net/yVmQd/223/

Sencha ExtJS empty grid rows

1 Answers