Question

我刚刚下载了Ext JS 5的试用版，我想知道如何使用单个组件而不是整个框架。 Ext的指南似乎没有关于此的指南。我试图使用此http://dev.sencha.com/deploy/ext-4.0.0/examples/form/combos.html

我可以只包含一个JS和一些像jQuery UI的图像吗？

Answer 1

查看sencha fiddle您可以添加以下cdn文件（或将其拉到本地），然后加载extjs框架。然后，您可以添加Ext.onReady并在页面上创建extjs元素：

需要Js文件：

<script type="text/javascript" src="https://cdn.sencha.com/ext/commercial/5.1.1/build/ext-all-debug.js"></script>
<script type="text/javascript" src="https://cdn.sencha.com/ext/commercial/5.1.1/packages/ext-theme-crisp/build/ext-theme-crisp.js"></script>

需要的CSS文件：

<link rel="stylesheet" type="text/css" href="https://cdn.sencha.com/ext/commercial/5.1.1/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all-debug_01.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.sencha.com/ext/commercial/5.1.1/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all-debug_02.css">

这是一个示例index.html文件，可在Ext准备就绪时加载消息框：

<html>
<head>
    <title>Test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <script type="text/javascript" src="https://cdn.sencha.com/ext/commercial/5.1.1/build/ext-all-debug.js"></script>
    <script type="text/javascript" src="https://cdn.sencha.com/ext/commercial/5.1.1/packages/ext-theme-crisp/build/ext-theme-crisp.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.sencha.com/ext/commercial/5.1.1/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all-debug_01.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.sencha.com/ext/commercial/5.1.1/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all-debug_02.css">
    <script type="text/javascript">
        Ext.onReady(function () {
            Ext.create('Ext.window.Window', {
                title: 'Hello World!',
                items: [{
                    html: 'Another Item Here'
                }]
            }).show();
        });
    </script>
</head>
<body>
    <p>TEST SITE</p>
</body>
</html>

编辑1（添加组合框）：

<html>
<head>
    <title>Test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <script type="text/javascript" src="https://cdn.sencha.com/ext/commercial/5.1.1/build/ext-all-debug.js"></script>
    <script type="text/javascript" src="https://cdn.sencha.com/ext/commercial/5.1.1/packages/ext-theme-crisp/build/ext-theme-crisp.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.sencha.com/ext/commercial/5.1.1/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all-debug_01.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.sencha.com/ext/commercial/5.1.1/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all-debug_02.css">
    <script type="text/javascript">
        Ext.onReady(function () {
            Ext.create('Ext.window.Window', {
                title: 'Hello World!',
                items: [{
                    html: 'Another Item Here'
                }]
            }).show();
            Ext.create('Ext.panel.Panel', {
                renderTo:'testDiv',
                width: 500,
                height: 500,
                title: 'This is another test',
                items: [{
                    html: 'Another test here too.'
                },{
                    xtype:'combobox',
                    width:400,
                    displayField: 'descr',
                    valueField: 'descr',
                    store: Ext.create('Ext.data.Store',{
                        fields:['descr'],
                        data: [{
                            descr: 'Example 1'
                        },{
                            descr: 'Example 2'
                        }]
                    })
                }]
            })
        });
    </script>
</head>
<body>
    <p>TEST SITE</p>
    <div id="testDiv"></div>
</body>
</html>

Ext.JS 5：如何使用单个组件（组合框）

1 个答案: