Ext.define('app.view.Calcie',
{
    extend: 'Ext.panel.Panel',
    alias: 'widget.Calcie',
    columnWidth: 1,
    items: [
    {
        xtype: 'form',
        title: 'Calculator',
        height: 415,
        width: 350,
        margin: '20 150 0 490',
        columnWidth: 1,
        style: "title: 5px solid #A1CAFF",
        bodyStyle: { "background-color": "#FFCE5A" },
        layout: {
            type: 'column'
        },
        items: [
        {
            xtype: 'container',
            itemId: 'formContainer',
            columnWidth: 1,
            margin: '10 15 0 15',
            layout: {
                type: 'column'
            },
            items: [
            {
                xtype: 'textarea',
                width: '100%',
                height: 5,
                itemId: 'displayTxtArea',
                id: 'displayTxtArea',
                name: 'displayTxtArea',
                columnWidth: 1,
                margin: '0 0 5 0',
            },
            {
                xtype: 'fieldcontainer',
                layout: {
                    type: 'hbox',
                },
                columnWidth: 1,
                itemId: 'radioButtonFContainer',
                id: 'radioButtonFContainer',
                name: 'radioButtonFContainer',
                items: [
                {
                    xtype: 'radiofield',
                    fieldLabel: 'Degree',
                    labelSeparator: '',
                    columnWidth: 0.49,
                    labelWidth: 45
                },
                {
                    xtype: 'radiofield',
                    fieldLabel: 'Radian',
                    labelSeparator: '',
                    columnWidth: 0.49,
                    margin: '0 0 0 45',
                    labelWidth: 45
                }]
            },
            {
                xtype: 'container',
                layout: {
                    type: 'column'
                },
                columnWidth: 1,
                margin: '5 0 0 0',
                defaults: {
                    style: {
                        background: '#FFB010'
                    }
                },
                items: [
                    {
                        xtype: 'button',
                        text: 'AC',
                        margin: '7 5 0 0',
                        columnWidth: 0.20,
                        style: {
                            background: '#FFB010'
                        }
                    },
                    {
                        xtype: 'button',
                        text: 'CE',
                        margin: '7 5 0 0',
                        columnWidth: 0.20, style: {
                            background: '#FFB010'
                        }
                    },
                    {
                        xtype: 'button',
                        text: 'OFF',
                        margin: '7 5 0 0',
                        columnWidth: 0.20
                    },
                    {
                        xtype: 'button',
                        text: 'Backspace',
                        margin: '7 0 0 0',
                        columnWidth: 0.40
                    }]
            },
            {
                xtype: 'container',
                layout: {
                    type: 'column'
                },
                columnWidth: 1,
                margin: '5 0 0 0',
                defaults: {
                    style: {
                        background: '#FFB010'
                    }
                },
                items: [
                    {
                        xtype: 'button',
                        text: 'Pi',
                        margin: '7 5 0 0',
                        columnWidth: 0.20
                    },
                    {
                        xtype: 'button',
                        text: 'sin',
                        margin: '7 5 0 0',
                        columnWidth: 0.20
                    },
                    {
                        xtype: 'button',
                        text: 'cos',
                        margin: '7 5 0 0',
                        columnWidth: 0.20
                    },
                    {
                        xtype: 'button',
                        text: 'tan',
                        margin: '7 5 0 0',
                        columnWidth: 0.20
                    },
                    {
                        xtype: 'button',
                        text: 'sin-1',
                        margin: '7 0 0 0',
                        columnWidth: 0.20
                    }]
            },
            {
                xtype: 'container',
                layout: {
                    type: 'column'
                },
                columnWidth: 1,
                margin: '5 0 0 0',
                defaults: {
                    style: {
                        background: '#FFB010'
                    }
                },
                items: [
                    {
                        xtype: 'button',
                        text: 'cos-1',
                        margin: '7 5 0 0',
                        columnWidth: 0.20
                    },
                    {
                        xtype: 'button',
                        text: 'tan-1',
                        margin: '7 5 0 0',
                        columnWidth: 0.20
                    },
                    {
                        xtype: 'button',
                        text: 'nPr',
                        margin: '7 5 0 0',
                        columnWidth: 0.20
                    },
                    {
                        xtype: 'button',
                        text: 'nCr',
                        margin: '7 5 0 0',
                        columnWidth: 0.20
                    },
                    {
                        xtype: 'button',
                        text: 'x^3',
                        margin: '7 0 0 0',
                        columnWidth: 0.20
                    }]
            },
            {
                xtype: 'container',
                layout: {
                    type: 'column'
                },
                columnWidth: 1,
                margin: '5 0 0 0',
                defaults: {
                    style: {
                        background: '#FFB010'
                    }
                },
                items: [
                    {
                        xtype: 'button',
                        text: 'x^y',
                        margin: '7 5 0 0',
                        columnWidth: 0.20
                    },
                    {
                        xtype: 'button',
                        text: '%',
                        margin: '7 5 0 0',
                        columnWidth: 0.20
                    },
                    {
                        xtype: 'button',
                        text: '1/x',
                        margin: '7 5 0 0',
                        columnWidth: 0.20
                    },
                    {
                        xtype: 'button',
                        text: 'ln x',
                        margin: '7 5 0 0',
                        columnWidth: 0.20
                    },
                    {
                        xtype: 'button',
                        text: 'log x',
                        margin: '7 0 0 0',
                        columnWidth: 0.20
                    }
                ]
            },
            {
                xtype: 'container',
                layout: {
                    type: 'column'
                },
                columnWidth: 1,
                margin: '5 0 0 0',
                defaults: {
                    style: {
                        background: '#FFB010'
                    }
                },
                items: [
                    {
                        xtype: 'button',
                        text: '7',
                        margin: '7 5 0 0',
                        columnWidth: 0.20
                    },
                    {
                        xtype: 'button',
                        text: '8',
                        margin: '7 5 0 0',
                        columnWidth: 0.20
                    },
                    {
                        xtype: 'button',
                        text: '9',
                        margin: '7 5 0 0',
                        columnWidth: 0.20
                    },
                    {
                        xtype: 'button',
                        text: '/',
                        margin: '7 5 0 0',
                        columnWidth: 0.20
                    },
                    {
                        xtype: 'button',
                        text: 'x!',
                        margin: '7 0 0 0',
                        columnWidth: 0.20
                    }
                ]
            },
            {
                xtype: 'container',
                layout: {
                    type: 'column'
                },
                columnWidth: 1,
                margin: '5 0 0 0',
                defaults: {
                    style: {
                        background: '#FFB010'
                    }
                },
                items: [
                    {
                        xtype: 'button',
                        text: '4',
                        margin: '7 5 0 0',
                        columnWidth: 0.20
                    },
                    {
                        xtype: 'button',
                        text: '5',
                        margin: '7 5 0 0',
                        columnWidth: 0.20
                    },
                    {
                        xtype: 'button',
                        text: '6',
                        margin: '7 5 0 0',
                        columnWidth: 0.20
                    },
                    {
                        xtype: 'button',
                        text: '*',
                        margin: '7 5 0 0',
                        columnWidth: 0.20
                    },
                    {
                        xtype: 'button',
                        text: 'x^2',
                        margin: '7 0 0 0',
                        columnWidth: 0.20
                    }
                ]
            },
            {
                xtype: 'container',
                layout: {
                    type: 'column'
                },
                columnWidth: 1,
                margin: '5 0 0 0',
                defaults: {
                    style: {
                        background: '#FFB010'
                    }
                },
                items: [
                    {
                        xtype: 'button',
                        text: '1',
                        margin: '7 5 0 0',
                        columnWidth: 0.20
                    },
                    {
                        xtype: 'button',
                        text: '2',
                        margin: '7 5 0 0',
                        columnWidth: 0.20
                    },
                    {
                        xtype: 'button',
                        text: '3',
                        margin: '7 5 0 0',
                        columnWidth: 0.20
                    },
                    {
                        xtype: 'button',
                        text: '-',
                        margin: '7 5 0 0',
                        columnWidth: 0.20
                    },
                    {
                        xtype: 'button',
                        text: 'x/-',
                        margin: '7 0 0 0',
                        columnWidth: 0.20
                    }
                ]
            },
            {
                xtype: 'container',
                layout: {
                    type: 'column'
                },
                columnWidth: 1,
                margin: '5 0 0 0',
                defaults: {
                    style: {
                        background: '#FFB010'
                    }
                },
                items: [
                    {
                        xtype: 'button',
                        text: '0',
                        margin: '7 5 0 0',
                        columnWidth: 0.20
                    },
                    {
                        xtype: 'button',
                        text: '.',
                        margin: '7 5 0 0',
                        columnWidth: 0.20
                    },
                    {
                        xtype: 'button',
                        text: '=',
                        margin: '7 5 0 0',
                        columnWidth: 0.20
                    },
                    {
                        xtype: 'button',
                        text: '+',
                        margin: '7 5 0 0',
                        columnWidth: 0.20
                    },
                    {
                        xtype: 'button',
                        text: 'sqrt',
                        margin: '7 0 0 0',
                        columnWidth: 0.20
                    }
                ]
            }
            ]
        }]
    }],
 
});

Code of app.js

Ext.application({
    extend: 'Ext.app.Application',   //extend app.Application class
    requires: ['Ext.container.Viewport', 'app.view.Ui', 'app.view.Calcie'],   // Define your requirements thats you call in this file
    name: 'app',
    launch: function () {
        Ext.create('Ext.container.Viewport', {
            layout: 'fit',
            items: [{
                xtype: 'Calcie'  //Define your type of component,Its define in alias of TabView class
            }]
        }); 
    },
});

Code of index.html:

<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <scripttype="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
    <linkhref="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css"rel="stylesheet"/>
    <scriptsrc="app.js"></script>
    
</head>
<body>
</body>
</html>