将行添加到Ext.grid.GridPanel

Posted 2021-05-06

我使用Extjs与一个名为bryntum的框架，我有一个问题，当我无法添加任何行到gridpanel我尝试了很多解决方案，但没有人工作我的代码是这样的：

1-模型：

Ext.define('Sch.examples.externaldragdrop.model.UnplannedTask', {
extend : 'Sch.model.Event',

fields : [
    { name : 'Duration', type : 'float' },
]

});

2-第一次从json文件读取的商店：

Ext.define('Sch.examples.externaldragdrop.store.UnplannedTaskStore', {
extend      : 'Ext.data.Store',
model       : 'Sch.examples.externaldragdrop.model.UnplannedTask',
requires    : [
    'Sch.examples.externaldragdrop.model.UnplannedTask'
],

autoLoad    : true,

proxy       : {
    url     : 'data/requests.json',
    type    : 'ajax',
    reader  : { type : 'json' },
    writer : {type : 'json'}
}

});

3-网格面板：

Ext.define('Sch.examples.externaldragdrop.view.UnplannedTaskGrid', {
extend : 'Ext.grid.GridPanel',
alias  : 'widget.unplannedtaskgrid',

requires : [
    'Sch.examples.externaldragdrop.store.UnplannedTaskStore',
    'Sch.examples.externaldragdrop.view.UnplannedTaskDragZone'
],
cls      : 'taskgrid',
title    : 'Unplanned Tasks',

initComponent : function () {
    Ext.apply(this, {
        viewConfig : { columnLines : false },

        store   : new Sch.examples.externaldragdrop.store.UnplannedTaskStore(),
        columns : [
            {header : 'Task', sortable : true, flex : 1, dataIndex : 'Name'},
            {header : 'Duration', sortable : true, width : 100, dataIndex : 'Duration'},
            {header : 'TestField', sortable : true, width : 100, dataIndex : 'TestField'},
        ]
    });

    this.callParent(arguments);
},

afterRender : function () {
    this.callParent(arguments);

    // Setup the drag zone
    new Sch.examples.externaldragdrop.view.UnplannedTaskDragZone(this.getEl(), {
        grid : this
    });
},

onDestroy: function() {
    this.store.destroy();
    this.callParent();
}

});

最后我的应用程序代码，我想在面板中添加一个新行：

var panelgrid = Ext.create('Sch.examples.externaldragdrop.view.UnplannedTaskGrid'),
        unplanned = panelgrid.getStore(),
 task = Ext.create('Sch.examples.externaldragdrop.model.UnplannedTask',
                    {"Id" : "t1", "Name" : "Fix bug", "Duration" : 4}
                    ),
                 task2 = Ext.create('Sch.examples.externaldragdrop.model.UnplannedTask',
                    {"Id" : "t5", "Name" : "Fix bug", "Duration" : 4}
                    );
unplanned.add(task);
unplanned.add(task2);
alert(unplanned.getCount());
unplanned.load();
panelgrid.getView().refresh();

答案

解：

1. 当您调用load（）时，默认情况下会删除所有现有记录。解决方案是使用其他“选项”参数。 unplanned.load（{addRecords：true}）;
2. 在商店配置中将autoLoad设置为false。

来自ExtJS帮助：

Ext.data.Store.load（[选项]）：

通过配置的代理将数据加载到Store中。这使用Proxy对Proxy使用的任何存储后端进行异步调用，自动将检索到的实例添加到Store中，并在需要时调用可选的回调。

选项：对象/功能（可选）

Config对象，在加载之前传递给Ext.data.Operation对象。另外addRecords：true可以指定将这些记录添加到现有记录中，默认是先删除Store的现有记录。

工作范例：

Ext.define('testmodel', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'Id', type: 'string'},
        {name: 'Name', type: 'string'},
        {name: 'Duration', type: 'number'}
    ]
});


Ext.onReady(function(){

    Ext.QuickTips.init();
    Ext.FocusManager.enable();
    Ext.Ajax.timeout = 100 * 1000;

    Ext.define('Trnd.TestWindow', {
        extend: 'Ext.window.Window',

        closeAction: 'destroy',
        border: false,
        width: 560,
        height: 500,
        modal: true,
        closable: true,
        resizable: false,
        layout: 'fit',

        loadTestData: function() {
            var me = this;

            var r1 = Ext.create('testmodel', {
                Id: '11',
                Name: 'Name 11 (before store load)',
                Duration: 0
            });
            me.store.add(r1);

            var r2 = Ext.create('testmodel', {
                Id: '12',
                Name: 'Name 12 (before store load)',
                Duration: 0
            });
            me.store.add(r2);

            me.store.load(
                {
                addRecords: true    
                }   
            );
        },

        initComponent: function() {
            var me = this;
            me.callParent(arguments);

            me.store = new Ext.data.Store({
                autoLoad: false,
                proxy: {
                    url: 'grid.json',
                    type: 'ajax',
                    reader: {type: 'json'},
                    writer: {type: 'json'}
                },
                model: 'testmodel'
            });

            me.grid = Ext.create('Ext.grid.Panel', {
                autoScroll: true,
                stripeRows: true,
                width: 420,
                height: 200,
                store: me.store,
                columnLines: false,
                columns : [
                    {header : 'Task', sortable : true, flex : 1, dataIndex : 'Name'},
                    {header : 'Duration', sortable : true, width : 100, dataIndex : 'Duration'}
                ]
            });
            me.add(me.grid);

            me.loadTestData();
        }

    }); 


    var win = new Trnd.TestWindow({

    });
    win.show();

});

Grid.json

[
    {Id : "01", Name: 'Name 01 (store load)', Duration: 1},
    {Id : "02", Name: 'Name 02 (store load)', Duration: 2}
]   

笔记：

我用ExtJS 4.2进行了测试。