ExtJS：在网格和图表之间共享存储

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!

Answer 1

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.

Answer 2

我切换到Highcharts并将ExtJS扔到垃圾箱：P