ExtJS TabPanel 渲染到自定義 DIV：用 `renderTo: 'div_id'` 一行搞定，無需 Viewport 佈局

只想用 TabPanel 控件，不想用 ExtJS 整頁 Border 佈局。核心屬性 `renderTo` 指向目標 DIV 的 `id`。

最小代碼

Ext.onReady(function() {
    var tabPanel = new Ext.TabPanel({
        renderTo: "div_tab",          // 關鍵：目標 DIV id
        activeTab: 0,
        width: 800,
        height: 500,
        items: [{
            title: 'Tab 1',
            html: '第一個頁簽內容'
        }, {
            title: 'Tab 2',
            html: '第二個頁簽內容'
        }]
    });
});

HTML

<body>
    <div id="div_tab" style="background:#D97E27; width:800px;height:500px;"></div>
</body>

進階：動態增減 Tab

tabPanel.add({ title: 'New Tab', html: '動態添加', closable: true });
tabPanel.setActiveTab(tabPanel.items.length - 1);

**注意**：`renderTo` 會讓組件脫離 ExtJS 佈局管理，父容器尺寸變化需手動調用 `tabPanel.setSize(w, h)` 或監聽 `window.resize` 同步。