Results 1 to 2 of 2

Thread: embed Ext-Components in existings HTML-Page

  1. #1
    Ext JS Premium Member
    Join Date
    Mar 2007
    Location
    Germany
    Posts
    754
    Answers
    7

    Default Answered: embed Ext-Components in existings HTML-Page

    Hi,

    in the earlier versions it was simple to embed a Ext.grid.Panel on a exiting HTML-Page. With newer versions Ext gets bigger an more structured.

    Whats is the easiest way for do this width Ext 6.x with less files?

    Bye, Dumbledore

  2. Still easy to do without Sencha Cmd. Here is an example for Ext JS 6.2.0 Classic with Triton theme and Charts package:

    No debug = 1.0 MB:
    https://fiddle.sencha.com/fiddle/2jds/preview
    Code:
    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    
    
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.2.0/ext-all.js"></script>
    
    
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.2.0/classic/theme-triton/resources/theme-triton-all.css">
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.2.0/classic/theme-triton/theme-triton.js"></script>
    
    
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.2.0/packages/charts/classic/classic/resources/charts-all.css">
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.2.0/packages/charts/classic/charts.js"></script>
    
    
        <script type="text/javascript">
        Ext.application({
            name: 'cdnjs test with charts package',
    
    
            launch: function() {
                Ext.create('Ext.chart.PolarChart', {
                    renderTo: document.body,
                    width: 600,
                    height: 500,
                    store: {
                        fields: ['name', 'g1', 'g2'],
                        data: [
                            {"name": "Item-0", "g1": 18.34,"g2": 0.04},
                            {"name": "Item-1", "g1": 2.67, "g2": 14.87},
                            {"name": "Item-2", "g1": 1.90, "g2": 5.72},
                            {"name": "Item-3", "g1": 21.37,"g2": 2.13},
                            {"name": "Item-4", "g1": 2.67, "g2": 8.53},
                            {"name": "Item-5", "g1": 18.22,"g2": 4.62}
                        ]
                    },
    
    
                    interactions: ['rotate'],
    
    
                    //configure the legend.
                    legend: {
                        docked: 'bottom'
                    },
    
    
                    //describe the actual pie series.
                    series: [{
                        type: 'pie',
                        xField: 'g1',
                        label: {
                            field: 'name',
                            display: 'rotate'
                        },
                        donut: 25,
                        style: {
                            miterLimit: 10,
                            lineCap: 'miter',
                            lineWidth: 2
                        }
                    }]
                });
            }
        });
        </script>
    </head>
    <body>
    </body>
    </html>

    With debug = 2.4 MB:
    https://fiddle.sencha.com/fiddle/2jdr/preview
    Code:
    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    
    
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.2.0/ext-all-debug.js"></script>
    
    
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.2.0/classic/theme-triton/resources/theme-triton-all-debug.css">
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.2.0/classic/theme-triton/theme-triton-debug.js"></script>
    
    
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.2.0/packages/charts/classic/classic/resources/charts-all-debug.css">
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.2.0/packages/charts/classic/charts-debug.js"></script>
    
    
        <script type="text/javascript">
        Ext.application({
            name: 'cdnjs test with charts package',
    
    
            launch: function() {
                Ext.create('Ext.chart.PolarChart', {
                    renderTo: document.body,
                    width: 600,
                    height: 500,
                    store: {
                        fields: ['name', 'g1', 'g2'],
                        data: [
                            {"name": "Item-0", "g1": 18.34,"g2": 0.04},
                            {"name": "Item-1", "g1": 2.67, "g2": 14.87},
                            {"name": "Item-2", "g1": 1.90, "g2": 5.72},
                            {"name": "Item-3", "g1": 21.37,"g2": 2.13},
                            {"name": "Item-4", "g1": 2.67, "g2": 8.53},
                            {"name": "Item-5", "g1": 18.22,"g2": 4.62}
                        ]
                    },
    
    
                    interactions: ['rotate'],
    
    
                    //configure the legend.
                    legend: {
                        docked: 'bottom'
                    },
    
    
                    //describe the actual pie series.
                    series: [{
                        type: 'pie',
                        xField: 'g1',
                        label: {
                            field: 'name',
                            display: 'rotate'
                        },
                        donut: 25,
                        style: {
                            miterLimit: 10,
                            lineCap: 'miter',
                            lineWidth: 2
                        }
                    }]
                });
            }
        });
        </script>
    </head>
    <body>
    </body>
    </html>

  3. #2
    Sencha Premium Member richardvd's Avatar
    Join Date
    Jun 2011
    Location
    NL
    Posts
    255
    Answers
    22

    Default

    Still easy to do without Sencha Cmd. Here is an example for Ext JS 6.2.0 Classic with Triton theme and Charts package:

    No debug = 1.0 MB:
    https://fiddle.sencha.com/fiddle/2jds/preview
    Code:
    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    
    
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.2.0/ext-all.js"></script>
    
    
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.2.0/classic/theme-triton/resources/theme-triton-all.css">
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.2.0/classic/theme-triton/theme-triton.js"></script>
    
    
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.2.0/packages/charts/classic/classic/resources/charts-all.css">
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.2.0/packages/charts/classic/charts.js"></script>
    
    
        <script type="text/javascript">
        Ext.application({
            name: 'cdnjs test with charts package',
    
    
            launch: function() {
                Ext.create('Ext.chart.PolarChart', {
                    renderTo: document.body,
                    width: 600,
                    height: 500,
                    store: {
                        fields: ['name', 'g1', 'g2'],
                        data: [
                            {"name": "Item-0", "g1": 18.34,"g2": 0.04},
                            {"name": "Item-1", "g1": 2.67, "g2": 14.87},
                            {"name": "Item-2", "g1": 1.90, "g2": 5.72},
                            {"name": "Item-3", "g1": 21.37,"g2": 2.13},
                            {"name": "Item-4", "g1": 2.67, "g2": 8.53},
                            {"name": "Item-5", "g1": 18.22,"g2": 4.62}
                        ]
                    },
    
    
                    interactions: ['rotate'],
    
    
                    //configure the legend.
                    legend: {
                        docked: 'bottom'
                    },
    
    
                    //describe the actual pie series.
                    series: [{
                        type: 'pie',
                        xField: 'g1',
                        label: {
                            field: 'name',
                            display: 'rotate'
                        },
                        donut: 25,
                        style: {
                            miterLimit: 10,
                            lineCap: 'miter',
                            lineWidth: 2
                        }
                    }]
                });
            }
        });
        </script>
    </head>
    <body>
    </body>
    </html>

    With debug = 2.4 MB:
    https://fiddle.sencha.com/fiddle/2jdr/preview
    Code:
    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    
    
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.2.0/ext-all-debug.js"></script>
    
    
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.2.0/classic/theme-triton/resources/theme-triton-all-debug.css">
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.2.0/classic/theme-triton/theme-triton-debug.js"></script>
    
    
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.2.0/packages/charts/classic/classic/resources/charts-all-debug.css">
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.2.0/packages/charts/classic/charts-debug.js"></script>
    
    
        <script type="text/javascript">
        Ext.application({
            name: 'cdnjs test with charts package',
    
    
            launch: function() {
                Ext.create('Ext.chart.PolarChart', {
                    renderTo: document.body,
                    width: 600,
                    height: 500,
                    store: {
                        fields: ['name', 'g1', 'g2'],
                        data: [
                            {"name": "Item-0", "g1": 18.34,"g2": 0.04},
                            {"name": "Item-1", "g1": 2.67, "g2": 14.87},
                            {"name": "Item-2", "g1": 1.90, "g2": 5.72},
                            {"name": "Item-3", "g1": 21.37,"g2": 2.13},
                            {"name": "Item-4", "g1": 2.67, "g2": 8.53},
                            {"name": "Item-5", "g1": 18.22,"g2": 4.62}
                        ]
                    },
    
    
                    interactions: ['rotate'],
    
    
                    //configure the legend.
                    legend: {
                        docked: 'bottom'
                    },
    
    
                    //describe the actual pie series.
                    series: [{
                        type: 'pie',
                        xField: 'g1',
                        label: {
                            field: 'name',
                            display: 'rotate'
                        },
                        donut: 25,
                        style: {
                            miterLimit: 10,
                            lineCap: 'miter',
                            lineWidth: 2
                        }
                    }]
                });
            }
        });
        </script>
    </head>
    <body>
    </body>
    </html>

Similar Threads

  1. Replies: 0
    Last Post: 11 Oct 2017, 4:11 AM
  2. How do I embed an ExtJS app in SAP BSP page?
    By sonnyg in forum Ext JS 6.x Q&A
    Replies: 1
    Last Post: 12 Oct 2015, 11:31 AM
  3. Embed a Extjs application in an HTML page
    By eamon250d in forum Ext: Q&A
    Replies: 3
    Last Post: 20 May 2014, 11:52 AM
  4. Possible to Embed OL and LI within a DIV on a Carousel Page/
    By planewryter in forum Sencha Touch 1.x: Discussion
    Replies: 1
    Last Post: 12 Jul 2011, 9:01 PM
  5. save extjs components as HTML page- need help
    By prajeesh_bs in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 17 Apr 2011, 9:08 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •