ExtJS-用户单击行时显示新选项卡

Question

我在ExtJS中有网格数据。我决定在用户​​单击特定行时插入一个新选项卡。新选项卡包含已连续发送的信息。

这是我的代码：

columns: [
    {
        text: 'Name',
        dataIndex: 'name',
        flex: 2,
        items: [
            {
                xtype: 'searchtrigger',
                autoSearch: true
            }
        ]
    }, 
    {
        text: 'Price',
        dataIndex: 'price',
        flex: 1
    }
],
bbar: {
    xtype: 'pagingtoolbar',
    displayInfo: true,
    displayMsg: 'Displaying {0} to {1} of {2}  records ',
    emptyMsg: "No records to display "
},
listeners: {
    select: function (tabPanel, newTab, oldTab, eOpts) {
        tabPanel.add({
            title: 'sometitle'
        });
    }
}

但是，在第一步中，我遇到了一个错误：

未捕获的TypeError：tabPanel.add不是函数

顺便说一句，我有几个问题：

1-在ExtJS中的两个视图之间传输数据的最佳实践是什么？

2-是否有解决上述问题的建议？

已编辑：这是fiddle：