开发者

extjs layouts, embedding html inside extjs viewport

开发者 https://www.devze.com 2023-04-10 05:30 出处:网络
i am trying to layout the following html inside this extjs viewpoint: Ext.application({ name: \'HelloExt\',

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.

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号