Sencha ExtJS空网格行

时间:2013-02-21 11:03:30

标签: extjs

我已经按照这些示例设置了一个带有网格的MVC风格的应用程序,该网格从商店中的数组中获取数据。

渲染网格时,会显示列,但行为空。存储数据数组中的记录总是有空行,但字段为空。

这是我的观点

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

这是我的模特:

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

这是我的商店:

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

我在网格中得到三个空行。

1 个答案:

答案 0 :(得分:2)

您的商店应该从Ext.data.Store而不是ArrayStore

延伸

这是一个小提琴:

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