extjs 如何在定义的panel添加store数据

你给个具体例子吧。光是讲很空洞

2025-05-13 14:34:07

推荐回答（3个）

回答（1）：

请把提问转移到电脑/网络 - 编程语言 - JavaScript ，谢谢。

Ext.onReady(function() {
    var gridStore = Ext.create('Ext.data.Store', {
        fields : ['id', 'name', 'gender', 'age'],
        data : [{
                id : 1,
                name : 'Ed',
                gender : 'Male',
                age : 25
            }, {
                id : 2,
                name : 'Jamie',
                gender : 'Male',
                age : 37
            }, {
                id : 3,
                name : 'Abe',
                gender : 'Female',
                age : 32
            }]
    });
    var gridPanel = Ext.create('Ext.grid.Panel', {
        height : 200,
        width : 400,
        columnLines : true,
        store : gridStore,
        columns : [{
            text : 'ID',
            dataIndex : 'id',
            align : 'center',
            flex : 1
        }, {
            text : 'Name',
            dataIndex : 'name',
            align : 'center',
            flex : 1
        }, {
            text : 'Age',
            dataIndex : 'age',
            align : 'center',
            flex : 1
        }, {
            text : 'Gender',
            dataIndex : 'gender',
            align : 'center',
            flex : 1
        }]
    });
    Ext.create('Ext.container.Viewport', {
        layout : 'absolute',
        items : gridPanel
    });
});

效果图：

回答（2）：

panel这个组件是没有store这个配置项的.

不过要在panel里面添加数据，有2种比较好用的方法:
1是可以使用XTemplate这个组件（也是extjs的组件之一）;
2是可以先执行ajax请求，把数据拼装成html再update panel组件的body.

回答（3）：

看官方 api和 demo