Extjs4 渲染面板，内容为'；分区'；在ExtJS中_Extjs4

Extjs4 渲染面板，内容为'；分区'；在ExtJS中

extjs4

Extjs4 渲染面板，内容为'；分区'；在ExtJS中,extjs4,Extjs4,我是ExtJS新手，我想渲染一个包含“div”内容的面板，几年前我尝试过ExtJS，我记得我可以使用： renderTo:“divID” 但现在我使用的是Ext4，似乎不起作用： <script type="text/javascript"> Ext.onReady(function() { var panel = new Ext.Panel({ width:'100%', height:'90%', layout:'bord

我是ExtJS新手，我想渲染一个包含“div”内容的面板，几年前我尝试过ExtJS，我记得我可以使用： renderTo:“divID”

但现在我使用的是Ext4，似乎不起作用：

    <script type="text/javascript">
 Ext.onReady(function() {     
    var panel = new Ext.Panel({
     width:'100%',
     height:'90%',
     layout:'border',
     defaults: {
         collapsible: true,
         split: true,
         bodyStyle: 'padding:15px'
     },
     items: [{
         title: 'Header',
         region: 'north',
         height: 150,
         minSize: 75,
         maxSize: 250,
         cmargins: '5 0 0 0',
         renderTo:'header-div'
     },{
         title: 'Footer',
         region: 'south',
         height: 150,
         minSize: 75,
         maxSize: 250,
         cmargins: '5 0 0 0'
     },{
         title: 'Navigation',
         region:'west',
         margins: '5 0 0 0',
         cmargins: '5 5 0 0',
         width: 175,
         minSize: 100,
         maxSize: 250
     },{
         title: 'Main Content',
         collapsible: false,
         region:'center',
         margins: '5 0 0 0',
         renderTo: 'content-div'
     }]
     });


});
</script>
</head>
<body>
<div id="header-div">Header Content</div>
<div id="content-div"></div>
</body>


Ext.onReady（函数（）{
var面板=新的外部面板({
宽度：'100%'，
高度：'90%'，
布局：'边框'，
默认值：{
可折叠的：是的，
斯普利特：是的，
车身风格：“衬垫：15px”
},
项目：[{
标题：“标题”，
地区：'北'，
身高：150，
minSize:75，
最大尺寸：250，
cmargins:'500'，
renderTo:“header-div”
},{
标题：“页脚”，
地区：'南'，
身高：150，
minSize:75，
最大尺寸：250，
cmargins:'500'
},{
标题：“导航”，
地区：'西部'，
边距：“500”，
cmargins:'55 0'，
宽度：175，
minSize:100，
最大尺寸：250
},{
标题:"主要内容",，
可折叠：错误，
地区：'中心'，
边距：“500”，
renderTo:'内容分区'
}]
});
});
标题内容

我不知道如何为每个面板提供jsp内容。有人能帮我吗？谢谢

标题面板的定义应如下所示：

....
{
     title: 'Header',
     region: 'north',
     height: 150,
     minSize: 75,
     maxSize: 250,
     cmargins: '5 0 0 0',
     html: Ext.get("header-div").getHTML()
 }
 ...

这将把id为header div的div的html内容放入面板中。为了防止内容翻倍，您还应该在整个Ext.Panel-stuff创建之后删除标题div：

Ext.get("header-div").remove();

谢谢你的帮助，随着你的方法而改变，但我的整个页面变为空白。找到解决方案后，我必须为整个面板赋予render属性，否则页面变为空白。此工作'var panel=new Ext.panel（{宽度：'100%，高度：'100%，布局：'border'，renderTo:'wrapper'，…'