Code of view(Calcie.js)section:
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:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet" />
<script src="app.js"></script>
</head>
<body>
</body>
</html>
Last updated:9/7/2019 12:16:28 AM
Sushant Mishra
This article is truly nice.