如何將控制器引用到Sencha Architect中的視圖？

Question

我用一個面板創建了一個視圖，其中包含2個表單面板，即「welcome」和「contactus」。「welcome」包含一個按鈕幷包含一個「onclick」事件。按下該按鈕應該隱藏「歡迎」形式，並應顯示「contactus」形式。 我添加了一個控制器，並在按鈕上添加了事件。現在我的問題是如何從面板中選擇單個窗體以及如何在控制器中引用這些單獨的窗體。 控制器引用具有「選擇器」，「xtype」和「ref」等字段。 我需要幫助，以填補這些fields.I將b感謝誰幫助我:)人

'/* 

*文件：應用程序/視圖/ contactus.js * *被煎茶架構師版本生成此文件2.2.2。 * http://www.sencha.com/products/architect/ * *此文件需要使用獨立許可下的Ext JS 4.2.x庫。 * Sencha Architect的許可證不包括Ext JS 4.2.x的許可證。欲瞭解更多 *詳情請參閱http://www.sencha.com/license或聯繫license@sencha.com。 * *每次保存項目時，都會自動生成該文件。 * *請勿手工編輯此文件。 */

Ext.define('MyApp.view.contactus', { 
extend: 'Ext.panel.Panel', 
alias: 'widget.contactus', 

height: 724, 
width: 479, 

initComponent: function() { 
    var me = this; 

    Ext.applyIf(me, { 
     items: [ 
      { 
       xtype: 'welcome', 
       frame: true, 
       height: 250, 
       html: 'Thank you for visiting our site! We welcome your feedback;  itemId: 'welcomeid', 
       width: 400, 
       layout: { 
        align: 'middle', 
        type: 'hbox' 
       }, 
       bodyPadding: 10, 
       title: 'Welcome', 
       dockedItems: [ 
        { 
         xtype: 'toolbar', 
         flex: 1, 
         dock: 'top', 
         items: [ 
          { 
           xtype: 'button', 
           itemId: 'contactusId', 
           margin: '0 0 50 50', 
           maxWidth: 70, 
           width: 70, 
           allowDepress: false, 
           preventDefault: false, 
           text: 'MyButton' 
          } 
         ] 
        } 
       ] 
      }, 
      { 
       xtype: 'contactus', 
       frame: true, 
       height: 250, 
       hidden: true, 
       itemId: 'contactid', 
       margin: '10 0 0 0', 
       width: 400, 
       bodyPadding: 10, 
       title: 'Contact Us ', 
       tools: [ 
        { 
         xtype: 'tool' 
        } 
       ], 
       items: [ 
        { 
         xtype: 'container', 
         layout: { 
          align: 'stretch', 
          type: 'hbox' 
         }, 
         items: [ 
          { 
           xtype: 'textfield', 
           flex: 1, 
           fieldLabel: 'Name', 
           labelWidth: 35, 
           allowBlank: false, 
           emptyText: 'FirstName' 
          }, 
          { 
           xtype: 'textfield', 
           margin: '0 0 0 5', 
           width: 45, 
           fieldLabel: '' 
          }, 
          { 
           xtype: 'textfield', 
           margin: '0 0 0 10', 
           width: 145, 
           allowBlank: false, 
           emptyText: 'LastName' 
          } 
         ] 
        }, 
        { 
         xtype: 'textfield', 
         anchor: '100%', 
         padding: '10 0 0 0', 
         fieldLabel: 'Email', 
         labelWidth: 50, 
         allowBlank: false, 
         vtype: 'email', 
         vtypeText: 'Enter a valid email Id!!' 
        }, 
        { 
         xtype: 'container', 
         items: [ 
          { 
           xtype: 'toolbar', 
           id: '', 
           margin: '0 0 0 280', 
           items: [ 
            { 
             xtype: 'button', 
             itemId: 'saveId', 
             text: 'Save' 
            }, 
            { 
             xtype: 'button', 
             itemId: 'cancelId', 
             text: 'Cancel' 
            } 
           ] 
          } 
         ] 
        } 
       ] 
      } 
     ] 
    }); 

    me.callParent(arguments); 
} 

}）;

Ext.define（ 'MyApp.controller.MyController'，{ 延伸： 'Ext.app.Controller'，

refs: [ 
    { 
     autoCreate: true, 
     ref: 'welcome', 
     selector: 'welcome', 
     xtype: '' 
    }, 
    { 
     ref: 'contactus', 
     selector: 'contactus' 
    } 
], 

onButtonClick: function(button, e, eOpts) { 

    debugger; 
    var form=this.getContactus(); 
    var form1=this.getWelcome(); 
    form.show(); 
    //debugger; 
    //form1.setDisabled(true); 
    //form1.disable(true); 
    form1.hide(); 

}, 

onSaveButtonClick1: function(button, e, eOpts) { 
    var form=this.getContactus(); 
    var form1=this.getWelcome(); 
    form.hide(); 
    form1.show(); 

}, 

init: function(application) { 
    this.control({ 
     "button#contactusId": { 
      click: this.onButtonClick 
     }, 
     "button#saveId": { 
      click: this.onSaveButtonClick1 
     } 
    }); 
} 

}）;」

Answer 1

你可以嘗試從你的控制器做up（）或down（）選擇。以下是源代碼中的示例代碼片段。

onButtonClick: function(button, e, eOpts) { 

    debugger; 
    var thisView = this.getView(); 
    var form= thisView.down('contactus'); 
    var form1=thisView.down('welcome'); 
    form.show(); 
    //debugger; 
    //form1.setDisabled(true); 
    //form1.disable(true); 
    form1.hide(); 

}