Javascript ExtJS提要查看器类功能

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

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

---

有谁能帮我找到需要实现的对象（除了网格——我已经实现了网格），以便从提要查看器中获取示例？如果有人有以下内容的话，可以链接到一个非常简单的教程：）

下面的部分可以是一个面板-Ext.panel.panel（我想在Feed Viewer中就是这样）。您可以使用Ext.XTemplate用html/文本填充它。也就是说，当网格中的任何行被选中时（为selectionchange事件创建侦听器），您将获得相关记录并将其与Ext.XTemplate一起使用以生成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('');
    }
}

---

下面的部分可以是一个面板-Ext.panel.panel（我想在提要查看器中就是这样）。您可以使用Ext.XTemplate用html/文本填充它。也就是说，当网格中的任何行被选中时（为selectionchange事件创建侦听器），您将获得相关记录并将其与Ext.XTemplate一起使用以生成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('');
    }
}

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