> 웹 프론트엔드 > JS 튜토리얼 > ExtJS4 컴포넌트 프로그래밍, 동적 로딩, 객체 지향, Direct_extjs

ExtJS4 컴포넌트 프로그래밍, 동적 로딩, 객체 지향, Direct_extjs

WBOY
풀어 주다: 2016-05-16 18:06:50
원래의
1031명이 탐색했습니다.

ExtJS4에서는 클래스를 정의할 때 Ext.define을 사용하고 이전 로그인 창을 수정하려면 xtype 동적 로딩
을 사용할 것을 권장합니다. 공식적으로 권장되는 방법을 사용하는 것이 여전히 매우 좋다고 생각합니다
. 하지만 아직 생각하지 못한 문제가 있습니다. 를 통해 먼저 코드를 게시하고 함께 연구하세요. 코드에 있는 설명을 참고하세요~~
Ext .Net을 사용하여 Direct 모드에서 데이터 전송
Default.aspx:

코드 복사 코드는 다음과 같습니다.




;ExtJS 학습<br><link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css"><script src="ext/ext-all.js" type="text/javascript "> </script> <br><script src="ext/ext-lang-zh_CN.js" type="text/javascript"></script> <br><script type=" text/javascript " src="ChcekLogin.ashx"></script> <br><script src="js/Ext.app.LoginFormPanel.js" type="text/javascript"></script> ; <BR><script type="text/javascript" src="js/Ext.app.LoginDialog.js"></script> <br></head> 🎜>< ;div id="loading-mask"></div> <br><div id="loading"> <br><div class="loading-indicator"><img alt=" " src="ext/resources/themes/images/default/shared/large-loading.gif" width="32" height="32" style="margin-right:8px;" /> 로드 중...</div> <br><script type="text/javascript">//Ext.Loader.setConfig({ 활성화됨: true }) ; <br>Ext.onReady(function () { <br>Ext.BLANK_IMAGE_URL = 'img/s.gif'; <br>Ext.QuickTips.init(); <br>Ext.Msg.minWidth = 300 ; <br>//확인 프롬프트 정보 표시 위치<br>Ext.form.Field.prototype.msgTarget = 'side' <br>//Ext.container.Viewport를 상속받은 인스턴스인 경우 새로 생성합니다. , 자동으로 본문으로 렌더링됩니다 <br>//이 예에서 Ext.app.LoginDialog는 Ext.Window를 상속하고 <br>새 Ext.app.LoginDialog()를 표시하려면 show() 메서드를 호출해야 합니다. show(); <br>/ /250밀리초 후 로딩 프롬프트 정보 삭제 <br>setTimeout(function () { <br>Ext.get('loading').remove(); <br>Ext.get(' loading-mask').fadeOut({ 제거: true }); <br>}, <br>})//onReady <br></script> </html> <br><br> <br>Ext.app.LoginDialog.js <br><br><br><br><br>코드 복사


closable: false,
closeAction: 'hide',
너비: 400,
높이: 300,
레이아웃: 'fit',
테두리: false,
모달: true,
/ /xtype: 'LoginFormPanel'을 사용하여 Ext.app.LoginFormPanel을 동적으로 인스턴스화하고 api 매개변수를 사용하여 서버측 로드 및 제출 방법을 지정합니다. 이 예에서는
항목만 제출합니다: {itemId: 'loginFormPanel', xtype: 'LoginFormPanel.',api: {제출: MyApp.ChcekLogin.Check}}
})


Ext.app.LoginFormPanel.js




코드 복사


코드는 다음과 같습니다.

//원격 호출을 위한 공급자를 지정합니다. 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)
}
})
}
}
});

댓글에 과정이 적혀있습니다. 궁금한 점이 있으면 아래에서 토론해 주세요.
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿