Search code examples
extjs4

Render panel with content of 'div' in ExtJS

I am new to ExtJS, I want to render a panel with content of 'div', years ago I tried ExtJS, and I rembmer I can use: renderTo:'divID'

But now I am using Ext4,seems not working:

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

I don't how to feed each panel with jsp stuff. Anyone can help me? Thanks. enter image description here

Solution

  • Your header-panel definition should look like:

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

    This will put the html-content of the div with the id header-div into the panel. To prevent doubling your content, you should also remove the header-div after the whole creation of the Ext.Panel-stuff:

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