如何在sencha touch中使用函數在Controller文件中傳遞參數

我在本地服務器中創建了一個sencha touch應用程序。在該應用程序中，有一個文本框和三個按鈕。
以下是我的app.js文件如何在sencha touch中使用函數在Controller文件中傳遞參數

Ext.application({ 
name: 'MyApp', 

requires: [ 
    'Ext.MessageBox' 
], 

views: [ 
    'Main' 
], 

controllers: [ 
    'CalcController' 
], 

icon: { 
    '57': 'resources/icons/Icon.png', 
    '72': 'resources/icons/Icon~ipad.png', 
    '114': 'resources/icons/[email protected]', 
    '144': 'resources/icons/[email protected]' 
}, 

isIconPrecomposed: true, 

startupImage: { 
    '320x460': 'resources/startup/320x460.jpg', 
    '640x920': 'resources/startup/640x920.png', 
    '768x1004': 'resources/startup/768x1004.png', 
    '748x1024': 'resources/startup/748x1024.png', 
    '1536x2008': 'resources/startup/1536x2008.png', 
    '1496x2048': 'resources/startup/1496x2048.png' 
}, 

launch: function() { 
    // Destroy the #appLoadingIndicator element 
    Ext.fly('appLoadingIndicator').destroy(); 

    // Initialize the main view 
    Ext.Viewport.add(Ext.create('MyApp.view.Main')); 
}, 

onUpdated: function() { 
    Ext.Msg.confirm(
     "Application Update", 
     "This application has just successfully been updated to the latest version. Reload now?", 
     function(buttonId) { 
      if (buttonId === 'yes') { 
       window.location.reload(); 
      } 
     } 
    ); 
}

}）;

以下是我Main.js文件

Ext.define('MyApp.view.Main', { 
extend: 'Ext.form.Panel', 
xtype: 'main', 
requires: [ 
    'Ext.TitleBar', 
    'Ext.Video' 
], 
config: { 
    items: [ 
     { 
      xtype:'textfield', 
      name:'txtDisplay', 
      id:'idDisplay', 
      readOnly:true, 
     }, 
     { 
      xtype:'button', 
      name:'btnClear', 
      id:'idClear', 
      width:'25%', 
      text:'C', 
      style:'float:left;', 
     }, 
     { 
      xtype:'button', 
      name:'btnSeven', 
      id:'idSeven', 
      width:'25%', 
      text:'7', 
      style:'float:left; clear:both;', 
      //action: 
      handler: function() 
      { 
       var x = Ext.getCmp('idSeven')._text; 
       Ext.getCmp('idDisplay').setValue(x); 
      } 
     }, 
     { 
      xtype:'button', 
      name:'btnEight', 
      id:'idEight', 
      width:'25%', 
      text:'8', 
      style:'float:left;', 
      action:'displayNum', 
     } 
    ] 
}

}）;

以下是我CalcController.js文件

Ext.define('MyApp.controller.CalcController', { 
extend: 'Ext.app.Controller', 
config: { 
    control: { 
     'button[action=displayNum]' : { 
      tap: 'displayNum' 
     }, 
    } 
}, 
displayNum: function() 
{ 
    console.log("This click event works"); 
}

}）;

現在我的問題如下：
當我按下名爲btnSeven的按鈕它顯示數字7在文本字段意味着處理函數的作品。現在我想在CalcController.js文件中單擊事件代碼，而不是在Main.js文件中編寫處理程序函數，爲此我創建了名爲btnEight的第二個按鈕，並給出action:'displayNum'，以便當該按鈕單擊的事件轉到CalcController.js文件時。

當我按下名爲btnEight的按鈕，然後我想要在CalcController.js文件中編寫代碼而不是在Main.js文件中編寫hander函數的幫助下在textfield中顯示數字8。那麼如何做到這一點？而不是定義ID爲組件的

來源

2016-02-13 user3216114

我解決我上面的方法如下問題：

現在我Main.js文件如下：

Ext.define('MyApp.view.Main', { 
extend: 'Ext.form.Panel', 
xtype: 'main', 
    requires: [ 
     'Ext.TitleBar', 
     'Ext.Video' 
    ], 
    config: { 
     items: [ 
      { 
       xtype:'textfield', 
       name:'txtDisplay', 
       id:'idDisplay', 
       readOnly:true, 
      }, 
      { 
       xtype:'button', 
       name:'btnClear', 
       id:'idClear', 
       width:'25%', 
       text:'C', 
       style:'float:left;', 
       action: 'clearDisplay', 
      }, 
      { 
       xtype:'button', 
       name:'btnSeven', 
       id:'idSeven', 
       width:'25%', 
       text:'7', 
       style:'float:left; clear:both;', 
       action: 'displayNum', 
       /*handler: function() 
       { 
        var x = Ext.getCmp('idSeven')._text; 
        Ext.getCmp('idDisplay').setValue(x); 
       }*/ 
      }, 
      { 
       xtype:'button', 
       name:'btnEight', 
       id:'idEight', 
       width:'25%', 
       text:'8', 
       style:'float:left;', 
       action:'displayNum', 
      } 
     ] 
    } 
});

和CalcController.js文件如下：

Ext.define('MyApp.controller.CalcController', { 
extend: 'Ext.app.Controller', 
    config: { 
     control: { 
      'button[action=displayNum]' : { 
       tap: 'displayNum' 
      }, 
      'button[action=clearDisplay]' : { 
       tap: 'clearDisplay' 
      }, 
     } 
    }, 
    displayNum: function(button, e, eOpts) 
    { 
     var x = Ext.getCmp('idDisplay')._value + button._text; 
     Ext.getCmp('idDisplay').setValue(x); 
    }, 
    clearDisplay: function(button, e, eOpts) 
    { 
     Ext.getCmp('idDisplay').setValue(''); 
    } 
});

使用這種方法，我使用按鈕的tap來在控制器文件中傳遞按鈕的屬性發泄。

來源

2016-02-21 18:58:05 user3216114

，定義物料標識

在控制器，你必須定義在配置引用。

config: { 
refs: { 
    'idDisplay': 'main #idDisplay' // idDisplay is itemId not Id here 
}, 
control: { 
'button[action=displayNum]' : { 
    tap: 'displayNum' 
    } 
} 
},

，並在這樣的displayNum功能編寫代碼。

displayNum: function(btn) 
{ 
    var display = this.getIdDisplay(); 
    display.setValue(btn.getText()); 
}

來源

2016-02-15 07:51:28

如何在sencha touch中使用函數在Controller文件中傳遞參數

回答

相關問題