Dynamic grid with dynamic model

[dominic_u]

Thanks

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

the code below didnt work. I wonder why it didnt trigger the metachange? Can someone help me what is my mistake

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

[pancho.munyoz]

do you know how make the same example charting the data values from the dynamic grid??

[pancho.munyoz]

Hi, I trying whit that code for dynamic chart.
I have been guided in the sample code in the url github.com/nonameplum/DynamicGrid.
The code like that:

/**
 * Lukas Sliwinski
 * sliwinski.lukas@gmail.com
 *
 * Dynamic grid, allow to display data setting only URL.
 * Columns and model will be created dynamically.
 */
Ext.Loader.setConfig({
    enabled: true
});




Ext.define('Ext.ux.grid.DynamicChart', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.dynamicChart',
    alternateClassName: 'Ext.grid.DynamicChart',
    requires: [
    'Ext.data.JsonStore',
    'Ext.chart.theme.Base',
    'Ext.chart.series.Series',
    'Ext.chart.series.Line',
    'Ext.chart.axis.Numeric'
    ],
    // URL used for request to the server. Required
    url: '',
    width: 900, 
    height: 200,
    frame: true,
    initComponent: function() {
        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, {
                layout: 'fit',
                height: 300,
                items: {
                    xtype: 'chart',
                    animate: true,
                    shadow: false,
                    store:  'Chart', 
                    legend: {
                        position: 'right'
                    },
                
                    //forceFit: true,
                    store: Ext.create('Ext.data.Store', {
                        series: [],
                        // Fields have to be set as empty array. Without this Ext will not create dynamic model.
                        axes: [],
                        // 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: true,
                        remoteGroup: false,
                        proxy: {
                            reader: 'dynamicReaderChart',
                            type: 'rest',
                            url: me.url
                        }
                    })
                }
            });
        }
        me.callParent(arguments);
    }
        
});

and

Ext.apply(Ext.data.Types, {
    FLOATORSTRING: {
        convert: function(v, n) {
            v = Ext.isNumeric(v) ? Number(v) : v;
            return v;
        },
        sortType: function(v) {
            v = Ext.isNumeric(v) ? Number(v) : v;
            return v;
        },
        type: 'floatOrString'
    }
});




Ext.define('Ext.ux.data.reader.DynamicReader', {
    extend: 'Ext.data.reader.Json',
    alias: 'reader.dynamicReader',
    alternateClassName: 'Ext.data.reader.DynamicReader',
    
    readRecords: function(data) {
            
        if (data.length > 0) {
            var item = data[0];


            var columns = new Array();
            var labels = new Array();
            var fields = new Array();
            var xFields = new Array();
            var p;
            var position = 'left';


            var series = new Array();
            var axes = new Array();
            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'
                    if (p=='id'||p=='Equipo'||p=='Locatizacion'||p=='Nombre Medicion'||p=='Unidad Medicion'||p=='Label'){
                        position = 'left';
                        fields = [];
                        
                        if (p=='Equipo'){
                            fields.push(p);   
                            axes.push({
                                type: 'Numeric',
                                position:position,
                                fields:fields
                            });
                        }
                        
                        
                    }
                    else {
                        xFields.push(p);
                        fields = [];
                        position = 'bottom';
                        fields.push(p);
                        axes.push({
                            type: 'Category',
                            position:position,
                            fields:fields
                        });     
                    }
                    
                    series.push({
                        type: typeChart,
                        lineWidth: 1,
                        showMarkers: false,
                        fill: true,
                        axis: 'left',
                        xField: xFields,
                        yField: 'Label',
                        style: {
                            'stroke-width': 1,
                            stroke: 'rgb(148, 174, 10)'


                        }
                    })


                
                    fields.push({
                        name: p, 
                        type: 'floatOrString'
                    });
                    columns.push({
                        text: p, 
                        dataIndex: p,
                        filter: {
                            type: 'string'
                        }
                    });
                    labels.push(p);
                }
            }


            data.metaData = {
                axes: axes, 
                series: series
            };
        }


        return this.callParent([data]);
    }

but don't work

[to_utopia]

Hi,thanks for your share of this plugin first.
I meet some problems when I use it.
when I add "renderer" property using my function in columns returned from server,
it doesn't work. but when I set "renderer":"usMoney" in columns, it works well.
What's wrong with it? how to use my custom function?

Thanks for all your help.

JSON code example:

{
"text": "PercentChange",
"renderer": "percentRender",
"dataIndex": "pct"
}

it not works!
but following works well!
{
"text": "PercentChange",
"renderer": "usMoney",
"dataIndex": "pct"
}