Wie würde ich einen Teil einer Handler-Funktion in einen Controller in Sencha setzen

Question

Ich habe eine Handler-Funktion, die eine Ext.window.Window erstellt, mit Feldern zur Eingabe von Daten, ich muss diesen Teil des Codes zu einer Controller-Funktion verschieben und trennen von der Haupt-Ajax-Anfrage ist dies für Code-Wiederverwendungszwecke.

var win = Ext.create('Ext.window.Window', { 
    title: 'New Client', 
    id: 'addClientWindow', 
    width: 500, 
    height: 300, 
    items: [{ 
     xtype: 'form', 
     bodyPadding: 10, 
     items: [{ 
      xtype: 'fieldset', 
      title: 'My Fields', 
      items: [{ 
       xtype: 'textfield', 
       anchor: '100%', 
       id: 'nameTextField', 
       fieldLabel: 'Name', 

       labelWidth: 140 
      }, { 
       xtype: 'textfield', 
       anchor: '100%', 
       id: 'physicalTextField', 
       fieldLabel: 'Physical Address', 

       labelWidth: 140 
      }, { 
       xtype: 'textfield', 
       anchor: '100%', 
       id: 'postalTextField', 
       fieldLabel: 'Postal Address', 

       labelWidth: 140 
      }] 
     }], 
     dockedItems: [{ 
      xtype: 'toolbar', 
      dock: 'bottom', 
      items: [{ 
       xtype: 'button', 
       id: 'cancelClientBtn', 
       text: 'Cancel', 
       listeners: { 
        click: function(c) { 
         Ext.getCmp('addClientWindow').close(); 
        } 

       } 
      }, { 
       xtype: 'tbspacer', 
       flex: 1 
      }, { 
       xtype: 'button', 
       id: 'saveClientBtn', 
       text: 'Save', 
       listeners: { 
        click: function(c) { 

         Ext.Ajax.request({ 
          url: 'system/index.php', 
          method: 'POST', 
          params: { 
           class: 'Company', 
           method: 'add', 
           data: Ext.encode({ 
            name: Ext.getCmp('nameTextField').getValue(), 
            physical: Ext.getCmp('physicalTextField').getValue(), 
            postal: Ext.getCmp('postalTextField').getValue() 

           }) 
          }, 
          success: function(response) { 
           Ext.MessageBox.alert('Status', 'Record has been updated.'); 
           Ext.getStore('CompanyStore').reload(); 
           Ext.getCmp('addClientWindow').close(); 
          }, 
          failure: function() { 
           Ext.MessageBox.alert('Status', 'Failed to update record.'); 
          } 
         }); 

        } 
       } 
      }] 
     }] 
    }] 
}); 

win.show(); 

Die Schaltfläche öffnet das Fenster und führt diese Ajax-Request, ich habe die zwei voneinander getrennte gerade benötigen. Jede Hilfe wird geschätzt.

Answer 1

Sie können Ihre Fenster in einem separaten Datei definieren und geben ihm einen Alias:

Ext.define('MyApp.view.MyWindow', { 
    extend: 'Ext.window.Window', 
    alias: 'widget.addclient', 
    ... 

    click: function(){ 
     var data = Ext.encode({ 
      name: Ext.getCmp('nameTextField').getValue(), 
      physical: Ext.getCmp('physicalTextField').getValue(), 
      postal: Ext.getCmp('postalTextField').getValue() 
     }); 

     // I assume here "this" links to the window component, 
     // if not, adjust accordingly 
     if(this.mycallback){ 
      this.mycallback(data); 
     } 
    } 

}); 

Dann können Sie es von anderen Controllern aufrufen und einen Rückruf bieten:

Ext.define('MyApp.view.MyController', { 
    extend: 'Ext.app.ViewController', 

    requires: 'MyApp.view.MyWindow', 

    openWindow: function(){ 
     var win = Ext.widget('addclient'); 
     win.mycallback = this.onAddClientCallback.bind(this); 
     win.show(); 
    }, 

    onAddClientCallback: function(data){ 
     console.log("data from window", data); 
    } 

});