Tuesday 3 September 2013

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);
}
});

Manipulation of data of table using jQuery

conversion : function(object){
      var associated_inputs = $($(object).parent().parent().siblings()).find('input');
         
      var change_type = object.name;
         
      if(change_type == 'count'){
        var count = $(object).val();
        var denom = $(associated_inputs[0]).val();
        var result=count*denom;
        $(associated_inputs[1]).val(result);
      }else
      {
        var amount = $(object).val();
        var denom = $(associated_inputs[0]).val();
        var result=amount/denom;
        $(associated_inputs[1]).val(result);
      }
         
      var cashamounts=$("#denomination_summary :input[name='amount']");
     
      var total = 0.00;

      cashamounts.each(function(){
        total += parseFloat($(this).val());
      });
      $("#total-denom-value").html(total);
    }
How to validate email in Sencha using listener

To do that add listener

listeners: [
            {
                fn: 'onHomeTelephonefieldBlur',//name of fxn
                event: 'blur',//textfield event
                delegate: '#txt_customer_home_telephone'//id of field Home telephone
            },
            {
                fn: 'onCustomerMobilefieldBlur',//name of fxn
                event: 'blur',//textfield event
                delegate: '#txt_customer_mobile'/id of field CustomerMobile
            },
            {
                fn: 'onEmailfieldBlur',
                event: 'blur',
                delegate: '#txt_customer_email'
            }
        ]
    },
    onHomeTelephonefieldBlur: function (textfield, e, eOpts) {

        if (textfield.getValue() === '') {
            Ext.Msg.alert("Home Telephone can't be empty");
            textfield.setFocus(true);
        }
        var val = textfield.getValue();
        if (val.search("[0-9]+") == -1)
        Ext.Msg.alert("Error", "Invalid Telephone Number!!");
    },

    onCustomerMobilefieldBlur: function (textfield, e, eOpts) {

        if (textfield.getValue() === '') {
            Ext.Msg.alert("Customer Mobile can't be empty");
            textfield.setFocus(true);
                 
        }
        var val = textfield.getValue();
        if (val.search("[0-9]+") == -1)
        Ext.Msg.alert("Error", "Invalid Mobile Number!!");
    },
    onEmailfieldBlur: function (textfield, e, eOpts) {

        if (textfield.getValue() === '') {
            Ext.Msg.alert("Email can't be empty");
            textfield.setFocus(true);
                 
        }
        var val = textfield.getValue();
        if (val.search("[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+[.][a-zA-Z]+") == -1)
          Ext.Msg.alert("Error", "Invalid e-mail address!!");
       
    },