在 ExtJS 中呈现内容为“div”的面板答案

【问题标题】：Render panel with content of 'div' in ExtJS在 ExtJS 中呈现内容为“div”的面板
【发布时间】：2014-05-26 16:31:24
【问题描述】：

我是 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>

我不知道如何为每个面板提供 jsp 内容。任何人都可以帮助我吗？谢谢。

【问题讨论】：

标签： extjs4

【解决方案1】：

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

....
{
     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-content 放入面板中。为防止内容翻倍，您还应该在整个创建 Ext.Panel-stuff 后删除 header-div：

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

【讨论】：

感谢您的帮助，随着您的方法改变，但我的整个页面变成了空白。
找到解决方案，我必须为整个面板赋予渲染属性，否则页面变为空白。此工作 'var panel = new Ext.Panel({ width:'100%', height: '100%', layout:'border', renderTo:'wrapper', ... '