Question

我试图在这个extjs观点中布置以下html：

Ext.application({
name: 'HelloExt',
launch: function() {
    Ext.create('Ext.container.Viewport', {
        layout: 'fit',
        items: [
            {
                title: 'Hello Ext',
                html : 'Hello! Welcome to Ext JS.'
            }
        ]
    });
}

}）;

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

有人可以解释一下如何做到这一点吗？

Answer 1

你可以像这样格式化你的html：http://pastebin.com/7muECqsQ 然后在配置视口时引用它

Ext.application({name: 'HelloExt',launch: function() {
Ext.create('Ext.container.Viewport', {
    layout: 'fit',
    items: [
        {
            title: 'Hello Ext',
            html : innerHtml //your above html
        }
    ]
});

} }）;

还有其他几种方法可以做到这一点。您可以创建一个Template / XTemplate并将其应用于Viewport的主体。

extjs布局，在extjs视口中嵌入html

1 个答案: