Search code examples
extjs4extjs4.1extjs-mvc

Paging and grouping in dynamic grid


I am using dynamic grid using this plugin.

I want to make paging in it,

I tried like,

Ext.define('....', {
    extend: 'Ext.data.Store',
    pageSize: 10,
    proxy: {
        type: 'rest',
        url: me.url,
        reader: {
            type: 'dynamicReader',
            totalProperty: 'totalCount'
        }
    }
});

me.bbar = Ext.create('Ext.PagingToolbar', {
    store: me.store,
    displayInfo: true,
    displayMsg: 'Displaying topics {0} - {1} of {2}',
    emptyMsg: "No topics to display"
});

In DynamicGrid.js totalProperty is not working. Am I setting the property properly there?

Then I am also trying to make grouping in the same plugin.

I have a combobox with some fields and want to select grouping field from it dynamically. When I select a field in combo box, it sends that data to grid's groupField property.

I have that combo box value selected in controller like,

var groupData = Ext.ComponentQuery.query('#groupid')[0].getValue();

I am sending it to grid like,

Ext.define('Group', {
    singleton: true,
    param: groupData
});

I am getting that for grid property (in DynamicGrid.js) like,

groupField: [Group.param]

But this automatically selects first field for groupField property before even selecting anything in combo box and makes grouping, selecting other fields in combo box also doesn't work, it always has first field for grouping.

What is going wrong? Please help.


Solution

  • I did grouping successfully by adding the following code in listener,

    me.store.group(Group.param);

    Still having issues with totalProperty, can someone help me to make it work?

    I think I am making a mistake, now actual JSON response is,

    [{
        "userId": 123,
        "name": "Ed Spencer",
        "email": "[email protected]"
    }]
    

    So the code for getting data and manipulating works fine like,

    readRecords: function(data) {
        if (data.length > 0) {
            var item = data[0];
            var fields = new Array();
            var columns = new Array();
            var p;
    
            for (p in item) {
                if (p && p != undefined) {
                    fields.push({name: p, type: 'floatOrString'});
                    columns.push({text: p, dataIndex: p});
                }
            }
            data.metaData = { fields: fields, columns: columns };
        }
        return this.callParent([data]);
    }
    

    But for sending other metaData properties, from the docs I should probably have the following JSON response,

    {
        "count": 1,
        "ok": true,
        "msg": "Users found",
        "users": [{
            "userId": 123,
            "name": "Ed Spencer",
            "email": "[email protected]"
        }],
        "metaData": {
            "root": "users",
            "idProperty": 'userId',
            "totalProperty": 'count',
            "successProperty": 'ok',
            "messageProperty": 'msg'
        }
    }
    

    So how do I point root in the readReords function so that it knows data is in root?

    Thereby I will have other metaData properties also passed.

    Please help!