javascript - 类似 Ext JS Feed Viewer 的功能

Question

我想使用 Ext JS MVC 构建一个界面，但我不太确定要使用哪些元素。我想要实现的类似于 Ext JS 的Feed Viewer。忽略左边的框架，我不想要那个，但我想要的是那个网格和它下面的那个东西（无法识别它是什么类型的对象）。

我希望能够有一个网格，当您单击一个条目时，它应该在下面的部分中显示更多详细信息。

谁能帮我找到我需要实现的对象（除了我已经实现的网格）以便从提要查看器中获得示例？一个非常简单的教程的链接也很好，如果有人有的话:)

Answer 1

下面的部分可能是一个面板 - Ext.panel.Panel（我认为在 Feed Viewer 中它是）。您可以使用 Ext.XTemplate 用 html/text 填充它。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('');
    }
}

您还可以在面板配置中指定模板：

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

...这种方式监听器被简化为：

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