Question

我是ExtJS的新手，我想渲染一个内容为'div'的面板，多年前我尝试过ExtJS，而且我可以使用rembmer： 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东西喂每个面板。有人可以帮帮我吗？谢谢。 enter image description here

Answer 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内容放入面板中。为了防止内容加倍，您还应该在整个Ext.Panel内容之后删除header-div：

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

在ExtJS中渲染包含'div'内容的面板

1 个答案: