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>

解决方案二：
直接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>

解决方案三：

给你一个Html版本的吧，其实一样的：

<!DOCTYPE html>

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' }] }); });