Bank voucher cash conversion using sencha touch
Ext.define('Cash.view.cash', {
extend: 'Ext.Container',
xtype: 'cash',
fullscreen: true,
config: {
title: 'Cashconfirm',
iconCls: 'action',
layout: 'hbox',
items: [
{
style: 'background-color: #5E99CC;',
xtype: 'fieldset',
title: 'Denomination',
//width: 250,
margin: 0,
width: 250,
items: [
{
xtype: 'button',
text: 'Rs 1',
height: 48,
},
{
xtype: 'button',
html: 'Rs 2',
height: 48
},
{
xtype: 'button',
html: 'Rs 5',
height: 48
},
{
xtype: 'button',
html: 'Rs 10',
height: 48
},
{
xtype: 'button',
html: 'Rs 20',
height: 48
},
{
xtype: 'button',
html: 'Rs 50',
height: 48
},
{
xtype: 'button',
html: 'Rs 100',
height: 48
},
{
xtype: 'button',
html: 'Rs 500',
height: 48
},
{
xtype: 'button',
html: 'Rs 1000',
height: 48
}
]
},
{
style: 'background-color: #5E99CC;',
xtype: 'fieldset',
title: 'Count',
width: 250,
margin: 0,
items: [
{
xtype: 'numberfield',
name: 'one',
//label: '1Rs',
labelcls: 'color red',
value: 0,
labelwidth: '80%',
labelalign: 'right',
border: 3,
style: {
'border-bottom': '1px solid green'
},
id: 'one',
flex: 1,
listeners: {
keyup: function() {
this.getParent().getParent().conversion();
}
}
},
{
xtype: 'numberfield',
name: 'two',
//label: '2Rs',
value: 0,
border: 3,
style: {
'border-bottom': '1px solid green'
},
id: 'two',
flex: 1,
listeners: {
keyup: function() {
this.getParent().getParent().conversion();
}
}
},
{
xtype: 'numberfield',
name: 'five',
//label: '5Rs',
value: 0,
border: 3,
style: {
'border-bottom': '1px solid green'
},
id: 'five',
flex: 1,
listeners: {
keyup: function() {
this.getParent().getParent().conversion();
}
}
},
{
xtype: 'numberfield',
name: 'ten',
//label: '10Rs',
value: 0,
border: 3,
style: {
'border-bottom': '1px solid green'
},
id: 'ten',
flex: 1,
listeners: {
keyup: function() {
this.getParent().getParent().conversion();
}
}
},
{
xtype: 'numberfield',
name: 'twenty',
//label: '20Rs',
value: 0,
border: 3,
style: {
'border-bottom': '1px solid green'
},
id: 'twenty',
flex: 1,
listeners: {
keyup: function() {
this.getParent().getParent().conversion();
}
}
},
{
xtype: 'numberfield',
name: 'fifty',
//label: '50Rs',
value: 0,
border: 3,
style: {
'border-bottom': '1px solid green'
},
id: 'fifty',
flex: 1,
listeners: {
keyup: function() {
this.getParent().getParent().conversion();
}
}
},
{
xtype: 'numberfield',
name: 'hundred',
//label: '100Rs',
value: 0,
border: 3,
style: {
'border-bottom': '1px solid green'
},
id: 'hundred',
flex: 1,
listeners: {
keyup: function() {
this.getParent().getParent().conversion();
}
}
},
{
xtype: 'numberfield',
name: 'fivehundred',
//label: '500Rs',
value: 0,
border: 3,
style: {
'border-bottom': '1px solid green'
},
id: 'fivehundred',
flex: 1,
listeners: {
keyup: function() {
this.getParent().getParent().conversion();
}
}
},
{
xtype: 'numberfield',
name: 'thousand',
//label: '1000Rs',
value: 0,
border: 3,
style: {
'border-bottom': '1px solid green'
},
id: 'thousand',
flex: 1,
listeners: {
keyup: function() {
this.getParent().getParent().conversion();
}
}
}
]
},
{
style: 'background-color: #5E99CC;',
xtype: 'fieldset',
title: 'Total',
iconCls: 'action',
width: 250,
margin: 0,
flex: 2,
items: [
{
xtype: 'numberfield',
name: 'one1',
//label: 'Rs',
value: 0,
border: 3,
style: {
'border-bottom': '1px solid green'
},
id: 'one1'
},
{
xtype: 'numberfield',
name: 'two1',
//label: 'Rs',
value: 0,
border: 3,
style: {
'border-bottom': '1px solid green'
},
id: 'two1'
},
{
xtype: 'numberfield',
name: 'five1',
//label: 'Rs',
value: 0,
border: 3,
style: {
'border-bottom': '1px solid green'
},
id: 'five1'
},
{
xtype: 'numberfield',
name: 'ten1',
//label: 'Rs',
value: 0,
border: 3,
style: {
'border-bottom': '1px solid green'
},
id: 'ten1'
},
{
xtype: 'numberfield',
name: 'twenty1',
//label: 'Rs',
value: 0,
border: 3,
style: {
'border-bottom': '1px solid green'
},
id: 'twenty1'
},
{
xtype: 'numberfield',
name: 'fifty1',
//label: 'Rs',
value: 0,
border: 3,
style: {
'border-bottom': '1px solid green'
},
id: 'fifty1'
},
{
xtype: 'numberfield',
name: 'hundred1',
//label: 'Rs',
value: 0,
border: 3,
style: {
'border-bottom': '1px solid green'
},
id: 'hundred1'
},
{
xtype: 'numberfield',
name: 'fivehundred1',
//label: 'Rs',
value: 0,
border: 3,
style: {
'border-bottom': '1px solid green'
},
id: 'fivehundred1'
},
{
xtype: 'numberfield',
name: 'thousand1',
//label: 'Rs',
value: 0,
border: 3,
style: {
'border-bottom': '5px solid black'
},
id: 'thousand1'
},
{
xtype: 'numberfield',
name: 'total1',
label: 'Total =',value: 0,
id: 'total1'
}
// ,
// {
// xtype: 'button',
// text: 'Total',
// ui: 'round',
// id: 'total',
// width: '20%'
// }
]
}
]
},
conversion : function(){
// console.log(">>>"+e.event.keyCode);
// if (e.event.keyCode == 13){
// console.log('User pressed enter');
// }
var one = Ext.getCmp('one').getValue();
var two = Ext.getCmp('two').getValue();
var five = Ext.getCmp('five').getValue();
var ten = Ext.getCmp('ten').getValue();
var twenty = Ext.getCmp('twenty').getValue();
var fifty = Ext.getCmp('fifty').getValue();
var hundred= Ext.getCmp('hundred').getValue();
var fivehundred = Ext.getCmp('fivehundred').getValue();
var thousand = Ext.getCmp('thousand').getValue();
var one1 =one*1;
var two1 =two*2;
var five1 =five*5;
var ten1 =ten*10;
var twenty1 =twenty*20;
var fifty1 =fifty*50;
var hundred1 =hundred*100;
var fivehundred1 =fivehundred*500;
var thousand1=thousand*1000;
var result = one1+two1+five1+ten1+twenty1+fifty1+hundred1+fivehundred1+thousand1;
Ext.getCmp('one1').getComponent().setValue(one1);
Ext.getCmp('two1').getComponent().setValue(two1);
Ext.getCmp('five1').getComponent().setValue(five1);
Ext.getCmp('ten1').getComponent().setValue(ten1);
Ext.getCmp('twenty1').getComponent().setValue(twenty1);
Ext.getCmp('fifty1').getComponent().setValue(fifty1);
Ext.getCmp('hundred1').getComponent().setValue(hundred1);
Ext.getCmp('fivehundred1').getComponent().setValue(fivehundred1);
Ext.getCmp('thousand1').getComponent().setValue(thousand1);
Ext.getCmp('total1').getComponent().setValue(result);
}
});
Ext.define('Cash.view.cash', {
extend: 'Ext.Container',
xtype: 'cash',
fullscreen: true,
config: {
title: 'Cashconfirm',
iconCls: 'action',
layout: 'hbox',
items: [
{
style: 'background-color: #5E99CC;',
xtype: 'fieldset',
title: 'Denomination',
//width: 250,
margin: 0,
width: 250,
items: [
{
xtype: 'button',
text: 'Rs 1',
height: 48,
},
{
xtype: 'button',
html: 'Rs 2',
height: 48
},
{
xtype: 'button',
html: 'Rs 5',
height: 48
},
{
xtype: 'button',
html: 'Rs 10',
height: 48
},
{
xtype: 'button',
html: 'Rs 20',
height: 48
},
{
xtype: 'button',
html: 'Rs 50',
height: 48
},
{
xtype: 'button',
html: 'Rs 100',
height: 48
},
{
xtype: 'button',
html: 'Rs 500',
height: 48
},
{
xtype: 'button',
html: 'Rs 1000',
height: 48
}
]
},
{
style: 'background-color: #5E99CC;',
xtype: 'fieldset',
title: 'Count',
width: 250,
margin: 0,
items: [
{
xtype: 'numberfield',
name: 'one',
//label: '1Rs',
labelcls: 'color red',
value: 0,
labelwidth: '80%',
labelalign: 'right',
border: 3,
style: {
'border-bottom': '1px solid green'
},
id: 'one',
flex: 1,
listeners: {
keyup: function() {
this.getParent().getParent().conversion();
}
}
},
{
xtype: 'numberfield',
name: 'two',
//label: '2Rs',
value: 0,
border: 3,
style: {
'border-bottom': '1px solid green'
},
id: 'two',
flex: 1,
listeners: {
keyup: function() {
this.getParent().getParent().conversion();
}
}
},
{
xtype: 'numberfield',
name: 'five',
//label: '5Rs',
value: 0,
border: 3,
style: {
'border-bottom': '1px solid green'
},
id: 'five',
flex: 1,
listeners: {
keyup: function() {
this.getParent().getParent().conversion();
}
}
},
{
xtype: 'numberfield',
name: 'ten',
//label: '10Rs',
value: 0,
border: 3,
style: {
'border-bottom': '1px solid green'
},
id: 'ten',
flex: 1,
listeners: {
keyup: function() {
this.getParent().getParent().conversion();
}
}
},
{
xtype: 'numberfield',
name: 'twenty',
//label: '20Rs',
value: 0,
border: 3,
style: {
'border-bottom': '1px solid green'
},
id: 'twenty',
flex: 1,
listeners: {
keyup: function() {
this.getParent().getParent().conversion();
}
}
},
{
xtype: 'numberfield',
name: 'fifty',
//label: '50Rs',
value: 0,
border: 3,
style: {
'border-bottom': '1px solid green'
},
id: 'fifty',
flex: 1,
listeners: {
keyup: function() {
this.getParent().getParent().conversion();
}
}
},
{
xtype: 'numberfield',
name: 'hundred',
//label: '100Rs',
value: 0,
border: 3,
style: {
'border-bottom': '1px solid green'
},
id: 'hundred',
flex: 1,
listeners: {
keyup: function() {
this.getParent().getParent().conversion();
}
}
},
{
xtype: 'numberfield',
name: 'fivehundred',
//label: '500Rs',
value: 0,
border: 3,
style: {
'border-bottom': '1px solid green'
},
id: 'fivehundred',
flex: 1,
listeners: {
keyup: function() {
this.getParent().getParent().conversion();
}
}
},
{
xtype: 'numberfield',
name: 'thousand',
//label: '1000Rs',
value: 0,
border: 3,
style: {
'border-bottom': '1px solid green'
},
id: 'thousand',
flex: 1,
listeners: {
keyup: function() {
this.getParent().getParent().conversion();
}
}
}
]
},
{
style: 'background-color: #5E99CC;',
xtype: 'fieldset',
title: 'Total',
iconCls: 'action',
width: 250,
margin: 0,
flex: 2,
items: [
{
xtype: 'numberfield',
name: 'one1',
//label: 'Rs',
value: 0,
border: 3,
style: {
'border-bottom': '1px solid green'
},
id: 'one1'
},
{
xtype: 'numberfield',
name: 'two1',
//label: 'Rs',
value: 0,
border: 3,
style: {
'border-bottom': '1px solid green'
},
id: 'two1'
},
{
xtype: 'numberfield',
name: 'five1',
//label: 'Rs',
value: 0,
border: 3,
style: {
'border-bottom': '1px solid green'
},
id: 'five1'
},
{
xtype: 'numberfield',
name: 'ten1',
//label: 'Rs',
value: 0,
border: 3,
style: {
'border-bottom': '1px solid green'
},
id: 'ten1'
},
{
xtype: 'numberfield',
name: 'twenty1',
//label: 'Rs',
value: 0,
border: 3,
style: {
'border-bottom': '1px solid green'
},
id: 'twenty1'
},
{
xtype: 'numberfield',
name: 'fifty1',
//label: 'Rs',
value: 0,
border: 3,
style: {
'border-bottom': '1px solid green'
},
id: 'fifty1'
},
{
xtype: 'numberfield',
name: 'hundred1',
//label: 'Rs',
value: 0,
border: 3,
style: {
'border-bottom': '1px solid green'
},
id: 'hundred1'
},
{
xtype: 'numberfield',
name: 'fivehundred1',
//label: 'Rs',
value: 0,
border: 3,
style: {
'border-bottom': '1px solid green'
},
id: 'fivehundred1'
},
{
xtype: 'numberfield',
name: 'thousand1',
//label: 'Rs',
value: 0,
border: 3,
style: {
'border-bottom': '5px solid black'
},
id: 'thousand1'
},
{
xtype: 'numberfield',
name: 'total1',
label: 'Total =',value: 0,
id: 'total1'
}
// ,
// {
// xtype: 'button',
// text: 'Total',
// ui: 'round',
// id: 'total',
// width: '20%'
// }
]
}
]
},
conversion : function(){
// console.log(">>>"+e.event.keyCode);
// if (e.event.keyCode == 13){
// console.log('User pressed enter');
// }
var one = Ext.getCmp('one').getValue();
var two = Ext.getCmp('two').getValue();
var five = Ext.getCmp('five').getValue();
var ten = Ext.getCmp('ten').getValue();
var twenty = Ext.getCmp('twenty').getValue();
var fifty = Ext.getCmp('fifty').getValue();
var hundred= Ext.getCmp('hundred').getValue();
var fivehundred = Ext.getCmp('fivehundred').getValue();
var thousand = Ext.getCmp('thousand').getValue();
var one1 =one*1;
var two1 =two*2;
var five1 =five*5;
var ten1 =ten*10;
var twenty1 =twenty*20;
var fifty1 =fifty*50;
var hundred1 =hundred*100;
var fivehundred1 =fivehundred*500;
var thousand1=thousand*1000;
var result = one1+two1+five1+ten1+twenty1+fifty1+hundred1+fivehundred1+thousand1;
Ext.getCmp('one1').getComponent().setValue(one1);
Ext.getCmp('two1').getComponent().setValue(two1);
Ext.getCmp('five1').getComponent().setValue(five1);
Ext.getCmp('ten1').getComponent().setValue(ten1);
Ext.getCmp('twenty1').getComponent().setValue(twenty1);
Ext.getCmp('fifty1').getComponent().setValue(fifty1);
Ext.getCmp('hundred1').getComponent().setValue(hundred1);
Ext.getCmp('fivehundred1').getComponent().setValue(fivehundred1);
Ext.getCmp('thousand1').getComponent().setValue(thousand1);
Ext.getCmp('total1').getComponent().setValue(result);
}
});