Javascript 将行添加到Ext.grid.GridPanel

我将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();

---

解决方案：

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

});

调用load（）时，默认情况下会删除所有现有记录。解决方案是使用附加的“选项”参数

计划外负荷( { addRecords:对 } );

---

在存储配置中将自动加载设置为false

来自ExtJS帮助：

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

});

Ext.data.Store.load（[options]）：

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

选项：对象/函数（可选）

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

工作示例：

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}
]   

注意事项：

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

});

---

我已经用ExtJS 4.2测试过了。

我尝试过，但没有意外的结果。添加（任务）；计划外加载（{addRecords:true}）；警报（unplan.getCount（））；panelgrid.getView（）.refresh（）；我认为问题出在getView（）.refresh（）中，因为getCount（）在添加后会显示正确的计数，但我看不到前GridPanel中的行它对我有效，即使不使用panelgrid.getView（）.refresh（）；“。它适用于我自己的代码。但您的代码似乎正确。对我来说，这似乎是合乎逻辑的，但没有结果：3我花了2天时间在store config中处理相同的问题，并将自动加载设置为false。我发布了一个使用我自己的代码的工作示例。