CODEWITHSUNDEEP
javascriptextjscombobox
Keyne Viana
Keyne Viana

Reputation: 6202

Ext.JS 5: How to use single components (combobox)

I've just downloaded the trial version of Ext JS 5 and I'm wondering how to use a single component instead of the whole framework. The Ext's guide doesn't seem to have a guide on this. I'm trying to use this http://dev.sencha.com/deploy/ext-4.0.0/examples/form/combos.html

Can I just include a JS and some images like jQuery UI?

Upvotes: 2

Views: 398

Answers (1)

weeksdev
weeksdev

Reputation: 4355

Looking at sencha fiddle you could add the following cdn files (or pull them local) and it'll load the extjs framework. Then you could add Ext.onReady and create extjs elements on your page:

Js Files Required:

<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 Files Required:

<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">

And here is an example index.html file that loads a message box when Ext is ready:

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

Edit 1 (Adding Combobox):

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

Upvotes: 2

Related Questions