//원격 호출을 위한 공급자를 지정합니다. config 속성이 initComponent보다 먼저 설정되고 API를 찾을 수 없음 오류가 보고되므로 initComponent에서 지정할 수 없습니다.
Ext.direct.Manager .addProvider(Ext.app.REMOTING_API);
//loginForm 클래스는 Ext.form.FormPanel을 상속하고 별칭을 사용하여 ComponentMgr에 등록하며 xtype:LoginFormPanel을 사용하여 상위 객체를 동적으로 인스턴스화합니다.
//form의 submit() 메소드는 Direct submit을 사용한다. 상위 객체가 이 클래스를 인스턴스화할 때 config의 api 속성을 사용하여 서버측 메소드를 지정한다.
//Ext.define 또는 Ext.apply에 api 속성을 지정할 수 없다는 점이 매우 이상합니다. 이를 지정하면 인스턴스화 후 손실되고 url 매개변수가 없다는 오류가 보고됩니다. . 이 클래스는 상위 객체에서만 인스턴스화할 수 있습니다. config에서 api 속성을 사용하여 api를 지정하는 경우
//여기서 원래의 새 방법을 사용하여 api를 지정하는 경우에도 문제가 되지 않습니다. ext4에서? 아시는 분은 이메일로 보내주세요~~
//Ext.define을 이용하여 이 클래스를 정의하고 정의에 initComponent를 이용하여 인스턴스화 전에 수행해야 할 작업을 지정합니다.
//객체 지향 프로그래밍의 개념에 따르면 이 클래스는 상위 객체를 호출하지 않으며 메서드에 범위가 지정되지 않습니다. LoginFormPanel',{
extend:'Ext.form.FormPanel',
initComponent: function(){
//초기화 부분에서 완료해야 하는 함수
//alert(" Ext.form.FormPanel이 로딩을 시작합니다...");
// Ext.apply에서 얻은 속성은 Ext.define에서 정의한 속성과 다르지 않은 것 같습니다. 왜 사용해야 할까요?
Ext. apply(this, {
//labelAlign: 'left'
})
this.callParent()
},
alias:'widget.LoginFormPanel',
labelAlign : 'left',
buttonAlign: 'center',
bodyStyle: 'padding:5px',
frame: true, labelWidth: 80,
items: [
{ xtype: 'textfield ', 이름: 'txt1', fieldLabel: '사용자 이름',
allowBlank: false, 앵커: '90%', 활성화KeyEvents: true,
리스너: {
keypress: 함수(필드, e) {
if (e.getKey() == 13 ) {
this.nextSibling().focus()
}
} //keypress
}
},
{ xtype: 'textfield', inputType: 'password' , name: 'txt2', fieldLabel: '사용자 비밀번호',
allowBlank: false, 앵커: '90%', 활성화KeyEvents: true,
리스너 : {
keypress: function (field, e) {
if (e.getKey() == 13) {
this.nextSibling().focus()
}
} //keypress
}
},
{ xtype: 'textfield', name: 'txt3', fieldLabel: '인증 코드',
allowBlank: false, 앵커: '90%', mixLength : 6, maxLength: 6, 활성화KeyEvents: true,
리스너: {
keypress: function (field, e) {
if (e.getKey() == 13) {
this.ownerCt .submit();
}
} / /keypress
}
},
{ xtype: '패널', 높이: 100, html: '
', 경계: false },
{ xtype: '패널', 높이: 30, html: '
*사진이 선명하지 않으면 사진을 클릭하여 사진을 변경하세요
', border: false }
], //items
buttons: [
{ text: 'OK', handler: function () { this.findParentByType('LoginFormPanel').submit(); }},
//이 객체 지향 프로그래밍에서는 범위를 추가하지 마세요. 여기에 범위를 추가하지 마세요. 그렇지 않으면 함수는 다음과 같습니다. 창에 할당됨
{ text: 'Reset', handler: function () { this.findParentByType('LoginFormPanel').form.reset() } }
],
submit: function () {
if (this .getForm().isValid()) {
this.getForm().submit({
success: function (form, action) {
window.location = "main .htm";
},
failure: function (form, action) {
//form 매개변수를 사용하여 원본 제출의 양식에 액세스
form.reset();
//결과 세트에 액세스하려면 action.result를 사용하십시오.
Ext.MessageBox.alert('Login failed', action.result.data)
}
})
}
}
});
댓글에 과정이 적혀있습니다. 궁금한 점이 있으면 아래에서 토론해 주세요.