jinlin_yu
2015-01-21 10:28
采纳率: 50%
浏览 3.2k
已采纳

怎么把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控件,其余都不要

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

3条回答 默认 最新

  • 骑着骆驼写程序 2015-01-21 15:01
    已采纳

    主要就是用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>
    
    打赏 评论
  • 直接render到你的div里面就好了,其他代码删除

     <div id="myPanel"></div>
    <script>
    Ext.onReady(function(){  
        var centerRegion = new Ext.TabPanel({  height:400,
            region : 'center',  
            margins : '3 3 3 0',//距离top、right、bottom、left边界的距离,单位为像素  
            activeTab : 0,  
            defaults : {  
                autoScroll : true  
            },  
            items : [{  
                title : '主页',  
                html : '内容'  
            }]  
        });  
      centerRegion.render('myPanel');
    });
    </script>
    
    打赏 评论
  • 骑着骆驼写程序 2015-01-21 14:59

    刚发的代码有问题
    <!DOCTYPE html>









    <br> Ext.onReady(function() { <br> var tabPanel = new Ext.TabPanel({<br> renderTo: &quot;div_tab&quot;,<br> activeTab: 0,<br> items: [{<br> title: &#39;Tab 1&#39;,<br> html: &#39;A simple tab&#39;<br> },{<br> title: &#39;Tab 2&#39;,<br> html: &#39;Another one&#39;<br> }]<br> });<br> });<br>


        </div>
    </body>
    

    
    
    打赏 评论

相关推荐 更多相似问题