1

我正在尝试构建一个实时绑定数据的计算器，而无需用户按下计算按钮。到目前为止，我可以让我的应用程序正常工作，但用户必须点击计算按钮才能执行我不想要的计算。我现在的问题是如何让我的计算器实时工作，这意味着一旦第一个、第二个和第三个文本字段被填满，第四个文本字段将自动生成答案而无需按下计算按钮。1 + 1 + 1 = (3) 一旦前 3 个文本字段被填充，3 将实时自动生成。到目前为止，以下是我的代码：

Ext.define("ikhlas.view.login", {
extend: 'Ext.Panel',
xtype: 'loginpanel',

    config:{
        title: 'Login',
        iconCls: 'more',
        styleHtmlContent: true,

    layout:{
        type: 'vbox',

        },

    items: [
        {
       xtype: 'container',
       iconCls: 'add',

    items: [

        {
            xtype: 'textfield',
            name: 'email',
            id: 'txtField1',
            placeHolder: 'Sum 1'
        },
        {
            xtype:  'spacer',
            height:   10,
        },
        {
            xtype: 'textfield',
            name: 'password',
            id: 'txtField2',
            placeHolder: 'Sum 2'
        },
        {
            xtype:  'spacer',
            height:   10,
        },
        {
            xtype: 'textfield',
            name: 'password',
            id: 'txtField3',
            placeHolder: 'Sum 3'
        },
        {
            xtype:  'spacer',
            height:   10,
        },
        {
            xtype: 'textfield',
            id: 'txtField4',
            name: 'password',
            placeHolder: 'Sum 4'
        },


   ]},
        {
            xtype: 'button',
            text: 'Calculate',
            ui: 'confirm',
            width: '30%',
            height: '6%',
            flex: 1,
            left: '55%',
            top: '65%',
            action: 'submitBtn'
        },

    ]}
});

我的控制器看起来像这样：

Ext.define('ikhlas.controller.SubmitController',{
extend: 'Ext.app.Controller',

config:{

refs:{
   submitBtn: '#submitBtn',
   txtField1: '#txtField1',
   txtField2: '#txtField2',
   txtField3: '#txtField3',
   txtField4: '#txtField4'
},

    control:{
        'button[action=submitBtn]':{
            tap :'submitbutton'
        }
    }
},

submitbutton:function(){

    var value1 = Ext.getCmp('txtField1').getValue();
    var value2 = Ext.getCmp('txtField2').getValue();
    var value3 = Ext.getCmp('txtField3').getValue();
    var value4;

    value4 = value1 * value2 * value3;
    Ext.getCmp('txtField4').setValue(value4);
}

});

到目前为止，该应用程序在代码提供方面运行良好，但我需要一个实时计算，这是我的目标。希望有人能帮忙。我的商店和我的模型现在都是空的。

4

2 回答 2

0

我自己没有尝试过，但我认为你必须听change你的文本字段的事件，每当值发生变化时，你必须重新计算值。

因此，对于您的每个输入文本字段，将其添加到您的控制器中：

control: {
    'button[action=submitBtn]': {
        tap: 'submitbutton'
    },
    // this should call your submitbutton function which calculates the values
    // every time the value of textfield1 changes
    txtField1: {
        change: 'submitbutton', 
    }
}
于 2012-05-22T07:50:30.027 回答
0

一个简单的计算器

Ext.define('Calc.view.Main', { extend:'Ext.form.Panel', fullscreen:true,

config: {



    items: [
             {

               layout:'vbox',
               style:'background-color:blue',
               flex:1,

               items:[
                    {
                       xtype:'textareafield',
                       name:'display',
                       style:'border:5px inset blue',
                       id:'display',
                       value:"0"

                   }
               ]
              },
              {
                layout:'hbox',
                style:'background-color:#cccccc',
                flex:1,
                items :[

                          {
                          xtype:'button',
                          text:'1',
                          style:'border:5px inset blue',
                          flex:1,
                          ui:'confirm',
                          handler: function() {



                               var num=Ext.getCmp('display').getValue();
                               if(num==0) {
                                Ext.getCmp('display').setValue("1");
                               }
                               else
                               {
                               num=num+"1";
                               Ext.getCmp('display').setValue(num);
                             }
                               console.log(num);
                          }

                  },
                 {
                          xtype:'button',
                          text:'2',
                          flex:1,
                          style:'border:5px inset blue',
                          ui:'confirm',
                          handler: function() {
                               console.log("print 2");
                               var num=Ext.getCmp('display').getValue();
                               if(num==0) {
                                Ext.getCmp('display').setValue("2");
                               }
                               else
                               {
                               num=num+"2";
                               Ext.getCmp('display').setValue(num);
                             }
                               console.log(num);
                               /*Ext.getCmp('display').setValue("2");
                               var num=Ext.getCmp('display').getValue();
                               num=num*10+1;
                               Ext.getCmp('display').setValue(num);
                               console.log(num);*/
                          }


                  },
                     {
                          xtype:'button',
                          text:'3',
                          style:'border:5px inset blue',
                          flex:1,
                          ui:'confirm',
                          handler: function() {
                               console.log("print 3");
                                var num=Ext.getCmp('display').getValue();
                                if(num==0) {
                                Ext.getCmp('display').setValue("3");
                               }
                               else
                               {
                               num=num+"3";
                               Ext.getCmp('display').setValue(num);
                             }
                               console.log(num);
                          }


                  }
                 ]
                 },
                 {
                  layout:'hbox',
                  style:'background-color:#909090',
                  flex:1,
                  items:[      
                          {
                           xtype:'button',
                           text:'4',
                           style:'border:5px inset blue',
                           flex:1,
                           ui:'confirm',
                           handler: function() {
                               console.log("print 4");

                                var num=Ext.getCmp('display').getValue();
                                if(num==0) {
                                Ext.getCmp('display').setValue("4");
                               }
                               else
                               {
                               num=num+"4";
                               Ext.getCmp('display').setValue(num);
                               console.log(num);
                          }
                        }


                           },      
                         {
                           xtype:'button',
                           text:'5',
                           flex:1,
                           style:'border:5px inset blue',
                           ui:'confirm',
                           handler: function() {
                               console.log("print 5");
                                var num=Ext.getCmp('display').getValue();
                                if(num==0) {
                                Ext.getCmp('display').setValue("5");
                               }
                               else
                               {
                               num=num+"5";
                               Ext.getCmp('display').setValue(num);
                             }
                               console.log(num);
                          }


                         },      
                          {
                           xtype:'button',
                           text:'6',
                           flex:1,
                           style:'border:5px inset blue',
                           ui:'confirm',
                           handler: function() {
                               console.log("print 6");
                               var num=Ext.getCmp('display').getValue();
                               if(num==0) {
                                Ext.getCmp('display').setValue("6");
                               }
                               else
                               {
                               num=num+"6";
                               Ext.getCmp('display').setValue(num);
                             }
                               console.log(num);
                          }


                          }       
                        ]
                      },
                      {
                         layout:'hbox',
                         style:'background-color:#A0A0A0',
                         flex:1,
                         items:[
                                 {
                                   xtype:'button',
                                   text:'7',
                                   style:'border:5px inset blue',
                                   flex:1,
                                   ui:'confirm',
                                   handler: function() {
                               console.log("print 7");
                                var num=Ext.getCmp('display').getValue();
                                if(num==0) {
                                Ext.getCmp('display').setValue("7");
                               }
                               else
                               {
                               num=num+"7";
                               Ext.getCmp('display').setValue(num);
                             }
                               console.log(num);
                          }

                                   },
                                  {
                                    xtype:'button',
                                    text:'8',
                                    style:'border:5px inset blue',
                                    flex:1,
                                    ui:'confirm',
                                    handler: function() {
                               console.log("print 8");
                                var num=Ext.getCmp('display').getValue();
                                if(num==0) {
                                Ext.getCmp('display').setValue("8");
                               }
                               else
                               {
                               num=num+"8";
                               Ext.getCmp('display').setValue(num);
                               console.log(num);
                             }
                          }


                                   },
                                    {
                                     xtype:'button',
                                     text:'9',
                                     style:'border:5px inset blue',
                                      flex:1,
                                      ui:'confirm',
                                      handler: function() {
                               console.log("print 9");
                                var num=Ext.getCmp('display').getValue();
                                if(num==0) {
                                Ext.getCmp('display').setValue("9");
                               }
                               else
                               {
                               num=num+"9";
                               Ext.getCmp('display').setValue(num);
                               }
                               console.log(num);
                             }
                            }


                                 ]
                              },        
                              {
                                layout:'hbox',
                                style:'background-color:#808080',
                                flex:1,
                                items: [ 
                                         {
                                           xtype:'button',
                                           text:'+',
                                           style:'border:5px inset blue',
                                           flex:1,
                                           ui:'confirm',
                                           handler: function() {
                                             var num = new Array();
                                             num=Ext.getCmp('display').getValue();



                                                  var len=num.length;
                                                  console.log(len);
                                                  var sub=num.substr(len-1,len);

                                                  console.log(sub);

                                                  if(sub!= "+" && sub!="-" && sub!="*" &&sub!="/")
                                                  { 
                                                    num=num+"+";
                                                   Ext.getCmp('display').setValue(num);
                                                  }

                                                console.log("print +");
                                           }
                          },



                                        {
                                         xtype:'button',
                                         text:'0',
                                         flex:1,
                                         style:'border:5px inset blue',
                                         ui:'confirm',
                                         handler: function() {
                               console.log("print 0");
                                var num=Ext.getCmp('display').getValue();
                                if(num==0) {
                                  num=num+"0";
                                Ext.getCmp('display').setValue(num);
                               }
                               else
                               {
                               num=num+"0";
                               Ext.getCmp('display').setValue(num);
                               console.log(num);
                             }
                          }

                                       },
                                        {
                                          xtype:'button',
                                          text:'=',
                                          flex:1,
                                          style:'border:5px inset blue',
                                          ui:'confirm',
                                          handler: function() {
                               console.log("print =");
                               var exp=new Array();
                               exp=Ext.getCmp('display').getValue();

                              var len=exp.length;



                              var sub=exp.substr(len-1,len); 
                              console.log(sub);


                                if(sub!= "+" && sub!="-" && sub!="*" && sub!="/") 
                               {

                                 console.log(eval(exp));
                                 Ext.getCmp('display').setValue(eval(exp));
                                }



                                         }
                                        }  
                                        ]
                                       },      
                                          {
                                            layout:'hbox',
                                            style:'background-color:#2FAA96',
                                            flex:1,
                                            items: [
                                            {
                                             xtype:'button',
                                             text:'-',
                                              flex:1,
                                              style:'border:5px inset blue',
                                             ui:'confirm',
                                             handler: function() {
                                             console.log("print -");
                                             var num = new Array()
                                             num=Ext.getCmp('display').getValue();

                                             var len=num.length;
                                             var sub=num.substr(len-1,len);
                                             if(sub!= "+" && sub!="-" && sub!="*" &&sub!="/")
                                             {
                                                  num=num+"-";
                                                   Ext.getCmp('display').setValue(num);
                                                console.log("print -");
                                             }
                                           }


                                             },   
                                             {
                                             xtype:'button',
                                              text:'*',
                                              style:'border:5px inset blue',
                                             flex:1,
                                             ui:'confirm',
                                             handler: function() {
                                              console.log("print *");
                                              var num = new Array()
                                               num=Ext.getCmp('display').getValue();
                                             var len=num.length;
                                             var sub=num.substr(len-1,len);
                                              if(sub!= "+" && sub!="-" && sub!="*" &&sub!="/")
                                                {
                                                  num=num+"*";
                                                   Ext.getCmp('display').setValue(num);
                                                console.log("print *");
                                           }
                                         }


                                              },
                                              {
                                                xtype:'button',
                                                text:'/',
                                                style:'border:5px inset blue',
                                                 flex:1,
                                               ui:'confirm',
                                               handler: function() {
                                               console.log("print /");
                                             var num = new Array()
                                             num=Ext.getCmp('display').getValue();
                                             var len=num.length;
                                             var sub=num.substr(len-1,len);
                                             if(sub!= "+" && sub!="-" && sub!="*" &&sub!="/")
                                                {
                                                  num=num+"/";
                                                   Ext.getCmp('display').setValue(num);
                                                console.log("print /");
                                                }
                                               }


                                               },
                                               ]
                                             },
                                             {
                                              layout:'hbox',
                                              flex:8,
                                              style:'background-color:red',
                                              items: [
                                              {
                                                xtype:'button',
                                                text:'clear',
                                                style:'border:5px inset blue',
                                                flex:1,
                                                ui:'small',
                                                handler: function() {
                                                  var cl=Ext.getCmp('display').getValue();
                                                  cl="";
                                                  Ext.getCmp('display').setValue(cl);
                                                }
                                              },
                                              {
                                                xtype:'button',
                                                text:'cancel',

                                                flex:2,
                                                ui:'back',
                                                handler:function() {
                                                  var no= new Array();
                                                  no=Ext.getCmp('display').getValue();
                                                  var len=no.length;
                                                  var sub=no.slice(0,len-1)

                                                  console.log(sub);
                                                  Ext.getCmp('display').setValue(sub);

                                                }

                                              }
                                              ]
                                             }

                                            ]
                                            }

});

于 2014-04-26T06:40:24.540 回答