向Ext.grid.GridPanel添加行

qzwqbdag 于 2022-10-18 发布在其他

关注(0)|答案(1)|浏览(211)

我将Extjs与一个名为bryntom的框架一起使用，我遇到了一个问题，当我无法向网格面板添加任何行时，我尝试了许多解决方案，但都不起作用，我的代码如下：
1、模式：

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

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

1.第一次读取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'}
    }
});

1.网格面板：

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

extjs

来源：https://stackoverflow.com/questions/49120183/add-row-to-ext-grid-gridpanel

1条答案

按热度按时间

xzabzqsa1#

解决方案：

1.调用Load()时，默认情况下会删除所有现有记录。解决方案是使用额外的“Options”参数。
Unplan ned.load({addRecords：true})；
1.在存储配置中将autoload设置为FALSE。

来自ExtJS帮助：

Ext.data.Store.Load([Options])：
通过配置的代理将数据加载到存储区。这使用代理对代理使用的任何存储后端进行异步调用，自动将检索到的示例添加到Store中，并在需要时调用可选回调。
选项：对象/函数(可选)
配置对象，在加载之前传递到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}
]

备注：

我已经用ExtJS4.2对此进行了测试。

赞(0）回复(0）举报 2022-10-18

我来回答

向Ext.grid.GridPanel添加行

1条答案

相关问题

热门标签

最新问答