ExtJs : Add Listener to textfield with text change event

var sample_popup_window = Ext.create('Ext.form.Panel', {

  name:'Edit_items',
  id:'Edit_items',                                     // id Edit_items is important to get fields data
  title: 'Edit Items',
  bodyPadding: 5,
  autoRender: true,
  frame : true,
  floating: true,
  height:380,
  width: 400,
  modal: true,
  layout:'anchor',
  closeAction: 'hide',

   items: [{
xtype: 'textfield',
fieldLabel: 'Quantity',
name: 'Items_qty',
dataIndex :'quantity',
allowBlank : false,
listeners: {                                                    // Listener added here with change event
'change': function(field, newVal1, oldVal){
alert('you changed the text of this input field');
CALtotal1(newVal1);                           // Function call on event change  
       }
     }
},
{
xtype : 'textfield',
fieldLabel: 'Cost',
name: 'Items_cost',
dataIndex : 'price',
allowBlank : false,
listeners: {
 'change': function(field, newVal2, oldVal){
  alert('you changed the text of this input field');
CALtotal2(newVal2);
 }
}
},
{
xtype: 'textfield',
fieldLabel: 'Total',
name: 'Items_tot',
id: 'Items_tot',
dataIndex : 'totalamount',
allowBlank : false,
readOnly: true
}
],
  buttons: ['->',{
 xtype:'button',
 minWidth: 80,
text: 'Update',
        formBind : true,
disabled : true,
handler : function(btn,evnt){

}
              },
              {
         minWidth: 80,
 text: 'Cancel',
handler : function(btn,evnt){

sample_popup_window.hide();

}
              }
    ],
});


function CALtotal1(newVal1){

  values = Ext.getCmp('Edit_items').getValues();

  var compTOT = Math.round(Number(newVal1) * Number(values.Items_cost)); // get inserted cost

  sample_popup_window .getForm().findField('Items_tot').setValue(compTOT);
}

function CALtotal2(newVal2){

  values = Ext.getCmp('Edit_items').getValues();

  var compTOT = Math.round(Number(newVal2) * Number(values.Items_qty));   // get inserted quantity

  sample_popup_window .getForm().findField('Items_tot').setValue(compTOT); // set total to textfield 
}

Comments