Dynamic grid with dynamic model

[plum]

Where should I set totalProperty?

http://docs.sencha.com/ext-js/4-1/#!...-totalProperty

You have to set totalProperty in reader, so you can change it in DynamicReader class.

proxy: {
	reader: Ext.create('Ext.ux.data.reader.DynamicReader', {
		 totalProperty: 'yourValue'
	}),
	type: 'rest',
	url: me.url
}

or


proxy: {
	reader: {
	      type: 'dynamicReader',
	      totalProperty: 'yourValue'
	},
	type: 'rest',
	url: me.url
}

I didn't test this code but should works.

[sencha.user]

This isn't working, still getting all rows in all pages .

[sencha.user]

Any idea? I tried giving some value directly for totalProperty, not working .

[sencha.user]

So it seems totalProperty SHOULD be given from the JSON response, but reader in DynamicGrid.js doesn't get that value, anyone know how I should set it with this plugin?

[Brett Hannah]

First off, great plugin.

Has anyone tried to get this working with the BufferedRenderer Grid Plugin in the ExtJS 4.2 Beta? I've given it a quick test and it doesn't seem to work out of the box.

Just wondering if anyone has got this working before I dive in.

Thanks,
Brett Hannah
LinkedIn
EdgeUX

[sencha.user]

Has anyone tried to get this working with the BufferedRenderer Grid Plugin in the ExtJS 4.2 Beta? I've given it a quick test and it doesn't seem to work out of the box.

Just wondering if anyone has got this working before I dive in.

Hi Brett,

Can you put some code you tried? I am trying this for sometime too, not able to get it done.

[Brett Hannah]

Hi,

The most logical thing would be to modify the DynamicGrid class to use the plugin within the 'apply' function as below:

Ext.define('Ext.ux.grid.DynamicGrid', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.dynamicGrid',
    alternateClassName: 'Ext.grid.DynamicGrid',


    requires: [
        'Ext.ux.data.reader.DynamicReader'
        'Ext.grid.plugin.BufferedRenderer'
    ],
    // URL used for request to the server. Required
    url: '',




    initComponent: function() {
        //console.log('DynamicGrid initComponent!');
        var me = this;


        if (me.url == '') {
            Ext.Error.raise('url parameter is empty! You have to set proper url to get data form server.');
        }
        else {
            Ext.applyIf(me, {
                columns: [],
                forceFit: true,
                store: Ext.create('Ext.data.Store', {
                    // Fields have to be set as empty array. Without this Ext will not create dynamic model.
                    fields: [],
                    // After loading data grid have to reconfigure columns with dynamic created columns
                    // in Ext.ux.data.reader.DynamicReader
                    listeners: {
                        'metachange': function(store, meta) {
                            me.reconfigure(store, meta.columns);
                        }
                    },
                    autoLoad: true,
                    remoteSort: false,
                    remoteFilter: false,
                    remoteGroup: false,
                    proxy: {
                        reader: 'dynamicReader',
                        type: 'rest',
                        url: me.url
                    }
                })
                plugins: 'bufferedrenderer'
            });
        }


        me.callParent(arguments);
    }
});

Unfortunately this does not appear to work.

[dominic_u]

Can someone help me what do I need to modify in DynamicReader.js on readRecord function.
I already put root : 'Data' on the Ext.ux.data.reader.DynamicReader and didnt work.

The ./data.js work fine and I found out the Json Format is like this [{}, {}, {} ], but i need like this {"Data":[{},{},{}]}

{"Data":[{"EmployeeID":1,"UserName":"dexter","Password":"96e79218965eb72c92a549dd5a330112","ComparePassword":"96e79218965eb72c92a549dd5a330112","TimeSheet":null,"FirstName":"Dexter","MiddleName":"","LastName":"Uy"},{"EmployeeID":2,"UserName":"dewey","Password":"96e79218965eb72c92a549dd5a330112","ComparePassword":"96e79218965eb72c92a549dd5a330112","TimeSheet":null,"FirstName":"Dewey","MiddleName":"","LastName":"Uy"},{"EmployeeID":3,"UserName":"dominic","Password":"96e79218965eb72c92a549dd5a330112","ComparePassword":"96e79218965eb72c92a549dd5a330112","TimeSheet":null,"FirstName":"Dominic","MiddleName":"","LastName":"Uy"},{"EmployeeID":4,"UserName":"diane","Password":"96e79218965eb72c92a549dd5a330112","ComparePassword":"96e79218965eb72c92a549dd5a330112","TimeSheet":null,"FirstName":"Diane","MiddleName":"","LastName":"Uy"},{"EmployeeID":5,"UserName":"camile","Password":"96e79218965eb72c92a549dd5a330112","ComparePassword":"96e79218965eb72c92a549dd5a330112","TimeSheet":null,"FirstName":"Camile","MiddleName":"","LastName":"Uy"}],"total":5}

[sencha.user]

You can either change your JSON response to return without root or try in DynamciReader.js like,

readRecords: function(datastr) {
        var data = {};
        if(datastr.Data){
            data = datastr.Data;
            }
        if (data.length > 0) {
        .
        .
        .
        return this.callParent([data]);
        }

Hope this will work.

[dominic_u]

Hi

When I use this kind of Code the Code will work correctly

Ext.define('Ext.ux.data.reader.DynamicReader', {
    extend: 'Ext.data.reader.Json',
    alias: 'reader.dynamicReader',
    alternateClassName: 'Ext.data.reader.DynamicReader',
	paramsAsHash: true,
	messageProperty: 'message',
	totalProperty: 'total',
    successProperty: 'success',
	root : 'Data',
	type : 'json',
	
    readRecords: function(data) {
		if (data.Data.length > 0) {
            var item = data.Data[0];
            var fields = new Array();
            var columns = new Array();
            var p;
            
            for (p in item) {
                if (p && p != undefined) {
                    // floatOrString type is only an option
                    // You can make your own data type for more complex situations
                    // or set it just to 'string'
                    fields.push({name: p, type: 'floatOrString'});
                    columns.push({text: p, dataIndex: p});
                }
            }


            data.metaData = { fields: fields, columns: columns };
        }


        return this.callParent([data]);
    }
});

My Problem the Store wont fire the metadata change. Another problem is we are required us to use Sencha Architect. Therefore it is hard to manipulate code.

The Code Produce by Architect is like this

Ext.define('Desktop.store.DynamicStore', {
    extend: 'Ext.data.Store',


    constructor: function(cfg) {
        var me = this;
        cfg = cfg || {};
        me.callParent([Ext.apply({
            autoLoad: true,
            storeId: 'MyJsonStore1',
            proxy: {
                type: 'ajax',
                url: 'http://localhost/iRelySuite/Employee/Dynamic?value=Employee',
                reader: {
                    type: 'json',
                    readRecords: function(data) {
                        alert("reading");
                        if (data.Data.length > 0) {
                            var item = data.Data[0];            
                            var fields = new Array();            
                            var columns = new Array();            
                            var p;


                            for (p in item) {
                                if (p && p != undefined) {
                                    // floatOrString type is only an option
                                    // You can make your own data type for more complex situations
                                    // or set it just to 'string'
                                    fields.push({name: p, type: 'string'});
                                    columns.push({text: p, dataIndex: p});
                                    alert(p);
                                }
                            }


                            data.metaData = { fields: fields, columns: columns };
                            alert(data.metaData.fields[0]);
                        }
                        return this.callParent([data]);


                    },
                    paramsAsHash: true,
                    messageProperty: 'message',
                    root: 'Data'
                }
            },
            listeners: {
                metachange: {
                    fn: me.MetaChange,
                    scope: me
                }
            },
            fields: [
                {
                    name: 'field7'
                }
            ]
        }, cfg)]);
    },


    MetaChange: function(store, meta, options) {
        alert("Metachange");
        alert(meta.columns[0]);
        me.reconfigure(store, meta.columns);
    }


});

Can someone help me to find the solution?
I really dont understand what is the meaning of this me.callParent() and also return this.callParent([data]);

Thanks in advance