缺少ExtJs网格列标题

我有一个简单的ExtJS网格，似乎无法显示列标题。数据在行中显示得很好，整个数据集都可以放在指定的空间中，并留有足够的空间。栅格被渲染成一个div，该div本身就是模态对话框的源。我错过了什么

HTML代码：

<div id="wrapperdiv" style="display:none"></div>

网格代码：

var panel = Ext.create(
   'Ext.grid.Panel',
   {
      border: true,
      autoScroll: true,
      width: 680,
      height: 200,
      layout: 'fit',
      id: 'theGrid',
      renderTo: 'wrapperdiv',
      columns:
      [
         { text: 'Col1', flex: 1, dataIndex: 'col1', hideable: false, sortable: true },
         { text: 'Col2', width: 120, align: 'center', dataIndex: 'col2', hideable: false, sortable: false },
         { text: 'Col3', width: 70, align: 'center', dataIndex: 'col3', hideable: false, sortable: false },
         { text: 'Col4', width: 100, align: 'center', dataIndex: 'col4', hideable: false, sortable: false }
      ],
      store: dataStore
   });

---

工作正常，没有任何问题

检查此处的小提琴链接-

http://jsfiddle.net/nGdM3/2/

---

不过，我想给出一个建议-您可以使用

Extjs窗口

谢谢，而不是使用jquery对话框和Extjs网格面板。。。在那个页面上还有很多我没有写的extjs东西；一定有冲突。

http://jsfiddle.net/nGdM3/2/