Ext JS Feed Viewer-like feature

Question

I want to build an interface using Ext JS MVC, and I'm not quite sure what elements to use. What I want to achieve is similar to Ext JS's Feed Viewer. Disregard the frame on the left, I don't want that, but what I want, is something like that grid and that thing below it (couldn't identify what kind of object it is).

I want to be able to have a grid, and when you click an entry, it should show more details in the section below.

Could anyone help me finding what object (in addition to the Grid -- which I already have implemented) I need to implement in order to have the example from the Feed Viewer? A link to a very simple tutorial would be also nice, if anyone has any :)

score 3 · Accepted Answer · answered Apr 16 '12 at 03:20

Section below could be a panel - Ext.panel.Panel (I think in Feed Viewer it is). You can fill it with html/text using Ext.XTemplate. That is, when any row in the grid selected (create listener for selectionchange event), you get associated record and use it with Ext.XTemplate to generate HTML.

selectionchange: function(sm, records) {
    var panel = Ext.getCmp('mypanel');
    var tpl = new Ext.XTemplate(
        '<p>Name: {name}</p>'
    );
    if (records.length > 0) {
        tpl.overwrite(panel.body, records[0].data);
    } else {
        panel.update('');
    }
}

You can also specify template in your panel config:

{
    xtype: 'panel',
    tpl: '<p>Name: {name}'
}

...this way listener is simplified to:

selectionchange: function(sm, records) {
    var panel = Ext.getCmp('mypanel');
    if (records.length > 0) {
        panel.update(records[0].data);
    } else {
        panel.update('');
    }
}

Ext JS Feed Viewer-like feature

1 Answers1