Foro

Como multiplicar el valor de dos textfield mostrando el resultado en otro textfield con keypress

0
Deseo que en un textfield me muestre el resultado de operar los valores ingresados en dos textfield utlizando el evento keypress.. agradesco de antemano sus respuestas..
0
No entregas mucha información de como tienes estructurado tu código pero creo que solo necesitas activarles la propiedad enableKeyEvents: true a los textfield que van a contener los valores a multiplicar y asignarles un listener a cada uno al evento keyup (puesto que con el evento keypress, el listener se ejecutaría antes de que el textfield tuviera algún valor por lo que tendrías que presionar 2 veces el numero para obtener un valor de multiplicación) Ext.onReady(function() {       this.form = new Ext.FormPanel({         renderTo: Ext.getBody(),         defaults:{           xtype:'textfield',           enableKeyEvents: true,           listeners:{             'keyup': function(){               resultado = Ext.getCmp('txt_valor_1').getValue() * Ext.getCmp('txt_valor_2').getValue();               Ext.getCmp('txt_resultado').setValue(resultado);             }           }         },           items:[             {             fieldLabel:'valor 1',             id: 'txt_valor_1'           },           {             fieldLabel:'valor 2',             id: 'txt_valor_2'           },           {             fieldLabel:'resultado',             id: 'txt_resultado',             readOnly:true           }         ]         });     }); espero te sirva
0
Recien estoy investigando sobre Extjs y no domino todas las clases y funciones de este framework, agradesco mucho tu respuesta, probare este codigo en mi proyecto, una pregunta adicional, el codigo cambia si lo hago en un grid editable.. ?? Gracias por tu atención...
0
El codigo que me pasaste Tokkaido me sirvio de mucho, ahora necesito hacer algo similar con un grid, el codigo que tengo es el siguiente: grid_detallecompra = Ext.extend(Ext.grid.EditorGridPanel, { title: 'Detalle de Compra', region: 'center', id: 'griddetalle', clicksToEdit:1, loadMask:true, removeData:[], store: storeOrder, enableKeyEvents: true, initComponent: function() { this.createTbar(); this.columns = [ { xtype:'numbercolumn', hidden:true, dataIndex:'id', hideable:false }, { xtype: 'gridcolumn', header:'Materia Prima', dataIndex:'materia', name: 'materia', width:180, sortable: true, editor: comboMateria }, { xtype: 'numbercolumn', id: 'txtprecio', dataIndex: 'precio', header: 'Precio Unitario', sortable: true, format:'0.00', width: 100, align: 'right', enableKeyEvents: true, editor: { xtype: 'numberfield' } }, { xtype: 'gridcolumn', header: 'Cantidad', id: 'txtcantidad', format:'0', sortable: true, width: 70, align: 'right', dataIndex: 'cantidad', allowBlank: false, editor: { xtype: 'numberfield' } }, { xtype: 'gridcolumn', dataIndex: 'subtotal', id: 'txtsubtotal', header: 'SubTotal', sortable: true, format:'0.00', width: 100, align: 'right', editor: { xtype: 'numberfield', readOnly: true } }, { xtype: 'gridcolumn', header:'Almacen Destino', dataIndex:'almacen', width:240, sortable: true, editor: comboAlmacen } ]; grid_detallecompra.superclass.initComponent.call(this); }, createTbar:function(){ this.tbar = [ { text:'Agregar', iconCls:'add-data', scope:this, handler:function(){ rec = new this.store.recordType({}); this.store.insert(0,rec); this.getView().refresh(); this.startEditing(0,1); } },{ text:'Remover', iconCls:'table-delete', scope:this, handler:function(){ this.stopEditing(); rec = this.getSelectionModel().getSelectedCell(); if (!rec){ Ext.example.msg('Advertencia','El siguiente dato sera borrado'); return false; } record_data = this.store.getAt(rec[0]); if (record_data.data.id){ this.removeData.push(record_data.data.id); } this.store.remove(this.store.getAt(rec[0])); this.getView().refresh(); if (this.store.getCount() > 0){ if (rec[0] > 0) this.getSelectionModel().select(rec[0] - 1, rec[1]); else this.getSelectionModel().select(rec[0], rec[1]); } } } ] }, getRemoveData:function(){ return this.removeData; } }); Necesito que cuando se digite un valor en la celda precio y/o cantidad me muestre un resultado en la celda subtotal, creo que no puedo hacer esto con el evento keyup, necesitaria usar el rowclick ?? nuevamente gracias por tu atención..
0
primero que todo los enableKeyEvents son solo para el numberfield que usas como editor de tu grid. Probé alguna forma de lograr lo que quieres y esto consegui: a tu grid agrégale un listener al evento cellclick para guardar algunos datos que necesitaremos: grid_detallecompra.on('cellclick', function(grid, rowIndex, columnIndex){ //uso window porque en mi prueba no pude acceder a this.columnEdit pero //en tu código puedes guardar mejor la variable con this. //obtengo el indice de la //columna y el indice de la fila que estoy editando window.columnEdit = columnIndex; window.rowEdit = rowIndex; }); luego lo que debes hacer es reemplazar tu editor por un numberField personalizado asi //creas tu numberField: this.numberField = new Ext.form.NumberField({ enableKeyEvents:true, allowBlank:false, listeners:{ 'keyup':function(txt){ record = grid.getStore().getAt(window.rowEdit) var fieldName = grid.getColumnModel().getDataIndex(window.columnEdit); if (fieldName =='precio'){ var precio = txt.getValue(); var cantidad = record.get('cantidad'); }else{ var precio = record.get('precio'); var cantidad = txt.getValue(); } var total = precio * cantidad; record.set('total', total); } }, }); y luego lo reemplazas en tu grid editor:this.numberField en mis pruebas funciono, espero te sirva
0
Muchas gracias Tokaido.. tu codigo me sirvio perfectamente.. gracias por tu apoyo..

¿Conoces a alguien que pueda responder esta pregunta? Comparte el link en Twitter o Facebook

Es necesario registrarse para poder participar en el foro! Si ya tienes una cuenta puedes entrar y comentar en este foro.