---
title: "Scientific Calculator layout code in Sencha ExtJs"
description: "This article introduce new designing way for those guy who interested to developed attractive responsive design in ExtJs"
author: "Hemant Patel"
published: 2017-03-07
updated: 2019-09-07
canonical: https://www.mindstick.com/articles/12256/scientific-calculator-layout-code-in-sencha-extjs
category: "sencha extjs"
tags: ["sencha"]
reading_time: 5 minutes
---
# Scientific Calculator layout code in Sencha ExtJs
\
\
##### 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:
```
```
---
Original Source: https://www.mindstick.com/articles/12256/scientific-calculator-layout-code-in-sencha-extjs
Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.