Question

我是ext js的新手，我有一个单独的index.html文件，其中包含一个图片库，如何调用该html并将其放置在面板或窗口中。

var GalleryWindow = Ext.create('Ext.window.Window',{
            iconCls: Function.Window.Icon,
            title: Function.Window.Text,
            constrainHeader: true,
            closeAction: 'hide',
            collapsible: false,
            forceLayout: true,
            maximizable: true,
            minimizable: true,
            resizable: true,
            closable: true,
            layout: 'fit',
            height: '70%',
            width: '60%',
            modal: true
        });

Answer 1

您需要使用autoEl config在ExtJS组件中使用iframe标记。

用于创建DomHelper的

AutoEl 标记名称或Element规范，用于封装此组件。

您通常不需要指定此内容。对于基类Ext.Component和Ext.container.Container，默认为div。更复杂的Sencha类使用由他们自己的renderTpls指定的更复杂的DOM结构。

这旨在允许开发人员创建由不同DOM元素封装的特定于应用程序的实用程序组件。用法示例：

{
    xtype: 'component',
    autoEl: {
        tag: 'iframe',
        src: 'http://www.example.com/example.html'
    }
}

在 FIDDLE 中，我使用与上面提到的相同的方式创建了一个演示。我希望这有助于/指导您实现您的要求。

CODE SNIPPET

Ext.application({
    name: 'Fiddle',
    launch: function () {
        Ext.create('Ext.window.Window', {
            title: 'Open other index file inside of window',
            height: 500,
            width: 500,
            layout: 'fit',
            items: [{
                xtype: "component",
                autoEl: {
                    tag: "iframe",
                    src: "res/example.html"
                }
            }]
        }).show();
    }
});

example.html的CODE SNIPPET

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>

    <div class="container">
        <h2>Button Styles</h2>
        <button type="button" class="btn">Basic</button>
        <button type="button" class="btn btn-default">Default</button>
        <button type="button" class="btn btn-primary">Primary</button>
        <button type="button" class="btn btn-success">Success</button>
        <button type="button" class="btn btn-info">Info</button>
        <button type="button" class="btn btn-warning">Warning</button>
        <button type="button" class="btn btn-danger">Danger</button>
        <button type="button" class="btn btn-link">Link</button>
        <br>

        <h2>Nesting Button Groups & Dropdown Menus</h2>
        <div class="btn-group">
            <button type="button" class="btn btn-primary">Apple</button>
            <button type="button" class="btn btn-primary">Samsung</button>
            <div class="btn-group">
                <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                    Sony <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="#">Tablet</a>
                    </li>
                    <li><a href="#">Smartphone</a>
                    </li>
                </ul>
            </div>
        </div>
        <br>

        <h2>Bootstrap Alerts</h2>
        <div class="alert alert-success">
            <strong>Success!</strong> Indicates a successful or positive action.
        </div>

        <div class="alert alert-info">
            <strong>Info!</strong> Indicates a neutral informative change or action.
        </div>

        <div class="alert alert-warning">
            <strong>Warning!</strong> Indicates a warning that might need attention.
        </div>

        <div class="alert alert-danger">
            <strong>Danger!</strong> Indicates a dangerous or potentially negative action.
        </div>
    </div>


</body>

</html>

渲染一个单独的html文件并放在ext js面板中

1 个答案: