ExtJS: share store between grid and chart

Question

I'm writing a simple application storing and displaying timestamped messages. Messages are JSON objects containing, say 2 main fields like:

{
  "emitted": "2011-12-08 12:00:00",
  "message": "This is message #666"
}

I have a model to describe these messages:

Ext.define('Message', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'emitted', type: 'date'   },
        { name: 'message', type: 'string' }
    ]
});

I have no problem displaying these messages in a grid. However, i would now like to display these messages in a chart. For instance, I would be able to grab numbers (like the #666 in the above example) and display a line chart.

Ideally, i don't want to create a new store for the chart, i would like to reuse the same message store, but apply a filter on the fields to grab the proper value. I don't know, something that might look like:

var chart = {
    xtype:   'chart',
    ...
    series: [{
        type:   'line',
        axis:   ['left', 'bottom'],
        xField: 'emitted',
        yField: {fieldName:'message', fieldGrabber: function(v) {
            new RegExp("This is message #(\d+)$", "g").exec(v)[1]
        }}
    }]
};

Does this kind of thing is possible in ExtJS ? I just tried to explain what I'm trying to do, i have no idea where to find such a feature: in the chart class, in the store class, or using a kind pf proxy to the store.

Side note: I cannot ask the data to be properly formatted to the server. The messages I receive are not backed up anywhere, they are just live events streamed to the client via socketIO.

Any advices greatly appreciated!

you made this comment in an answer of mine I've since rescinded: "The messages I receive are not backed up anywhere, they are just live events streamed to the client via socketIO" This is very important information in order to be able to help you. Be advised you are going to need a custom solution largely dependent on the Javascript language underlying ExtJS, rather than merely being able to configure ExtJS as is — Dexygen

Rene Saarsoo Rene Saarsoo · Accepted Answer · 2011-12-08T13:43:54

You should extract the value inside you model to a separate field:

Ext.define('Message', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'emitted', type: 'date'   },
        { name: 'message', type: 'string' },
        { name: 'nr', convert: function(v, r){
            return r.get('message').replace(/^.*#/, '');
        } }
    ]
});

Or you might be better off just having the 'nr' field and using a renderer in Grid that displays it as "This is message #{nr}".

Then you can use the 'nr' field directly in you chart.

ExtJS: share store between grid and chart

2 Answers