의 ExtJS 4 : 제대로 난에 extjs 4.0 컨트롤러가 MVC 패턴

Question

를 사용 waitMsgTarget 설정 :

Ext.define('KS.controller.DailyReport', { 
extend: 'Ext.app.Controller', 

views: ['report.Daily'], 


init: function() { 
    this.control({ 
     'dailyReport button[action=send]': { 
      click: this.sendDailyReport 
     } 
    }); 
}, 

sendDailyReport: function(button) { 
    var win = button.up('window'); 

    form = win.down('form'); 
    form.getForm().waitMsgTarget = form.getEl(); 
    form.getForm().waitMsg = 'Sending...'; 
    if (form.getForm().isValid()) { // make sure the form contains valid data before submitting 
     form.submit({ 
      success: function(form, action) { 
       Ext.Msg.alert('Success', action.result.msg); 
      }, 
      failure: function(form, action) { 
       Ext.Msg.alert('Failed', action.result.msg); 
      } 
     }); 
    } else { // display error alert if the data is invalid 
     Ext.Msg.alert('Invalid Data', 'Correct them!') 
    } 
} 
}); 

ExtJS로보기 : 당신이 볼 수 있듯이

Ext.define('KS.view.report.Daily', { 
extend: 'Ext.window.Window', 
alias: 'widget.dailyReport', 

title: 'Daily report', 
layout: 'fit', 
autoShow: true, 
initComponent: function() { 
    this.items = [{ 
     waitMsgTarget: true, 
     xtype: 'form', 
     url: 'dailyReport.php', 
     layout: 'fit', 
     waitMsgTarget: true, 
     waitMsg: 'Sending...', 
     items: [{ 
      margin: 10, 
      xtype: 'datefield', 
      name: 'reportDate', 
      fieldLabel: 'Report for:', 
      format: 'd.m.Y.', 
      altFormats: 'd.m.Y|d,m,Y|m/d/Y', 
      value: '12.12.2011', 
      disabledDays: [0] 
     }] 
    }]; 

    this.buttons = [{ 
     text: 'Send', 
     action: 'send' 
    }, 
    { 
     text: 'Cancel', 
     scope: this, 
     handler: this.close 
    }]; 

    this.callParent(arguments); 
} 
}); 

내가 두 곳에서 waitMsgTarget 및 waitMsg을 설정하려고 하지만 보내기 버튼을 클릭하면 나타나지 않습니다.

무엇이 잘못 되었나요?

Answer 1

당신은 정말 그냥 다음과 같은 방법으로 waitMsg을 오용하고 있습니다 :

1. waitMsg는 Ext.form.Basic 또는 Ext.form.Panel의 설정 옵션이 아닙니다. 은 Ext.form.action.Submit 내에 설정해야합니다. 이것이 뷰에서 설정하는 것이 결코 효과가없는 이유입니다.
2. 컨트롤러에서 동일한 작업을하고 을 Ext.form.Basic의 속성 인 것처럼 설정합니다.

수정 사항은 간단합니다. Ext.form.action.Submit에 waitMsg을 설정하십시오. 당신이 (

form.getForm().waitMsgTarget = form.getEl(); 
form.getForm().waitMsg = 'Sending...'; 

과 완전성에 대한

뷰에서이 두 줄을 제거 : 그래서, 그냥 같은 것으로 form.submit() 내 라인 (들)을 변경 :

form.submit({ 
    waitMsg: 'Sending...', 
    success: function(form, action) { 
      Ext.Msg.alert('Success', action.result.msg); 
     }, 
    //..... your other stuff here 
}); 

컨트롤러에서 다음 줄을 제거 waitMsgTarget)를 두 번 거기 :

waitMsgTarget: true, 
waitMsg: 'Sending...', 

---

참고 : waitMsgTarget을 양식 자체가 아닌 다른 것으로 정의하려면 id 대상을 전달해야합니다. 참조 참고

waitMsgTarget: 'myWindowID', 
//where myWindowID is the id of the container you want to mask 

:

예를 들어,보기에 (즉, 양식 정의가) 당신에 waitMsgTarget: true을 변경하려는 것, http://docs.sencha.com/ext-js/4-0/#!/api/Ext.form.action.Submit 및 http://docs.sencha.com/ext-js/4-0/#!/api/Ext.form.Basic