程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> 更多編程語言 >> 編程綜合問答 >> tabpanel-怎麼把extjs 的TabPanel加入到自定義的div中

tabpanel-怎麼把extjs 的TabPanel加入到自定義的div中

編輯:編程綜合問答
怎麼把extjs 的TabPanel加入到自定義的div中

我自己在主頁面jsp上布局了格式,想把他的TabPanel加到自己定義的div中。給出詳細代碼!謝謝

 Ext.onReady(function(){  
    var centerRegion = new Ext.TabPanel({  

        region : 'center',  
        margins : '3 3 3 0',//距離top、right、bottom、left邊界的距離,單位為像素  
        activeTab : 0,  
        defaults : {  
            autoScroll : true  
        },  
        items : [{  
            title : '主頁',  
            html : '內容'  
        }]  
    });  
    centerRegion.render('con');
    var westRegion = new Ext.Panel({  
        title : '導航',  
        region : 'west',  
        split : true,  
        width : 200,  
        //True表示為面板是可收縮的,並自動渲染一個展開/收縮的輪換按鈕在頭部工具條  
        collapsible : true,  
        margins : '3 0 3 3',  
        cmargins : '3 3 3 3',  
        layout : 'accordion',  
        layoutConfig : {  
            titleCollapse : true,//單擊標題就可以折疊面板  
            animate : true,//展開的效果  
            activeOnTop : true//是否可以改變順序  
        },  
        items : []  
    });  

    new Ext.Viewport({  
        layout : 'border',   
        items : [{
            region : 'north',
            height : 100,
            title : '頂部面板'
        },
        {
            region : 'south',
            height : 30,
            title : '底部面板'
        },
        westRegion,
        centerRegion]  
    });  
});

以上是extjs的布局頁面我只想要他的TabPanel控件,其余都不要

最佳回答:


主要就是用renderTo指向div的id就可以了

        Ext.onReady(function() { 
            var tabPanel = new Ext.TabPanel({
            renderTo: "div_tab",
            activeTab: 0,
            items: [{
              title: 'Tab 1',
              html: 'A simple tab'
            },{
              title: 'Tab 2',
              html: 'Another one'
            }]
        });
       });

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

    </div>
</body>
  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved