extjs layouts, embedding html inside extjs viewport
i am trying to layout the following html inside this extjs viewpoint:
Ext.application({
name: 'HelloExt',
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [
{
title: 'Hello Ext',
html : 'Hello! Welcome to Ext JS.'
}
]
});
}
});
the HTML:
<div id='logo'></div>
<header class='search'>
<input type="search">
</header>
<br class="clear" />
<header class='main'>
<nav class='main'>
<ul>
<li>Dashboard</li>
<li>Claims Handling</li>
<li>Reports</li>
<li>Accounts</li>
</ul>
</nav>
<nav class='menu'>
<ul>
<li>Mini Portal</li>
<li>Authorize Transaction</li>
<li>Insert Invoice Nu开发者_如何学Pythonmber</li>
<li>Add Batch Claims</li>
</ul>
</nav>
</header>
<section id='container'>
<div class='head'>
<header class='sub'>
<h1>Authorize Transaction</h1>
<nav class='sub'>
<ul>
<li><a href="">Authorize</a></li>
<li><a href="">Insert Number</a></li>
<li><a href="">Add Batch Claims</a></li>
<li><a href="">Change Details</a></li>
</ul>
</nav>
<section class="table"></section>
<div id="forms"></div>
</header>
</div>
</section>
could anyone please explain how this could be done?
You could format your html like this : http://pastebin.com/7muECqsQ and then just reference it when configuring your viewport
Ext.application({name: 'HelloExt',launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [
{
title: 'Hello Ext',
html : innerHtml //your above html
}
]
});
} });
There are several other ways to do this. You could create a Template / XTemplate and apply it to the body of the Viewport also.
精彩评论