如何在缓冲存储区中设置数据

Question

I am using ExtJS buffered store for paging and other purpose. I want to load data in buffered store. in normal store I can use

store.loadData(thistore.data.items);

But in buffered store I can not use loadData . I can see as per my code i am getting data in response but I don't know how to set the data. Can one help me what is the alternate of loadData in Ext.data.BufferedStore

Answer 1

Have you tried store.load method ?

store.load({
        callback: function(records, operation, success) {
            console.log(records);
        }
    });

UPDATE

Based on this sencha example, i created an example for you using extjs 6.5.2 classic. I used the classic toolkit because in modern virtualstore is being used instead of bufferedstore .

Here is the code:

Ext.define('ForumThread', {
    extend: 'Ext.data.Model',
    fields: [{
        name: 'title',
        mapping: 'topic_title'
    }, {
        name: 'forumtitle',
        mapping: 'forum_title'
    }, {
        name: 'forumid',
        type: 'int'
    }, {
        name: 'username',
        mapping: 'author'
    }, {
            name: 'replycount', 
            mapping: 'reply_count',
            type: 'int'
    }, {
            name: 'lastpost', 
            mapping: 'post_time', 
            type: 'date', 
            dateFormat: 'timestamp'
    },
        'lastposter', 'excerpt', 'topic_id'
    ],
    idProperty: 'post_id'
});

var store = Ext.create('Ext.data.BufferedStore', {
    id: 'store',
    model: 'ForumThread',

    // The topics-remote.php script appears to be hardcoded to use 50, and ignores this parameter, so we
    // are forced to use 50 here instead of a possibly more efficient value.
    pageSize: 50,

    // This web service seems slow, so keep lots of data in the pipeline ahead!
    leadingBufferZone: 1000,
    proxy: {
        // load using script tags for cross domain, if the data in on the same domain as
        // this page, an HttpProxy would be better
        type: 'jsonp',
        url: 'https://www.sencha.com/forum/topics-remote.php',
        reader: {
            rootProperty: 'topics',
            totalProperty: 'totalCount'
        },
        // sends single sort as multi parameter
        simpleSortMode: true,

        // Parameter name to send filtering information in
        filterParam: 'query',
    },
    remoteFilter: true,
    autoLoad: false
});

function onSearchParamApplied () {
    var searchParam = grid.down('#txtSearchParam').getValue();

    var store = grid.getStore();
    if (!store)
        return;

    store.getProxy().extraParams['query'] = searchParam;

    store.reload({ 
        callback: function (records, operation, success) {
            grid.down('#status').setValue(store.getTotalCount());
        }
    });
}

function onStoreLoadClick () {
    var store = grid.getStore();
    if (!store)
        return;

    store.load({ 
        callback: function (records, operation, success) {
            grid.down('#status').setValue(store.getTotalCount());
        }
    });
}

var grid = Ext.create('Ext.grid.Panel', {
    width: 700,
    height: 470,
    padding: 10,
    collapsible: true,
    title: 'ExtJS.com - Browse Forums',
    store: store,
    loadMask: true,
    dockedItems: [{
        dock: 'top',
        xtype: 'toolbar',
        items: [{
            xtype: 'textfield',
            itemId: 'txtSearchParam',
            width: 400,
            fieldLabel: 'Search',
            labelWidth: 50,
        }, {
            xtype: 'button',
            iconCls: 'x-fa fa-search',
            tooltip: 'Reload buffered store with the new param',
            handler: onSearchParamApplied
        }, {
            xtype: 'button',
            text: 'loadGrid',
            handler: onStoreLoadClick
        },'->', {
            xtype: 'displayfield',
            itemId: 'status',
            fieldLabel: 'Count ',
            value: '0' //initial value
        }]
    }],
    selModel: {
        pruneRemoved: false
    },
    multiSelect: true,
    viewConfig: {
        trackOver: false,
        emptyText: '<h1 style="margin:20px">No matching results</h1>'
    },
    // grid columns
    columns:[{
        xtype: 'rownumberer',
        width: 50,
        sortable: false
    },{
        tdCls: 'x-grid-cell-topic',
        text: "Topic",
        dataIndex: 'title',
        flex: 1,
        //renderer: renderTopic,
        sortable: false
    },{
        text: "Author",
        dataIndex: 'username',
        width: 100,
        hidden: true,
        sortable: false
    },{
        text: "Replies",
        dataIndex: 'replycount',
        align: 'center',
        width: 70,
        sortable: false
    },{
        id: 'last',
        text: "Last Post",
        dataIndex: 'lastpost',
        width: 130,
        renderer: Ext.util.Format.dateRenderer('n/j/Y g:i A'),
        sortable: false
    }],
    renderTo: Ext.getBody()
});

Points of interest:

-Click "loadGrid" button to load the records.

-Add some text to the "Search" textfield and click the search button in order to refresh the grid based on the query provide by the text you entered.

You can also add the code inside a sencha fiddle (select a classic theme from the top right selectfield) and run it.

I hope i helped.