ExtJS4 component programming, dynamic loading, object-oriented, Direct_extjs

ExtJS4 recommends using Ext.define when defining classes and using xtype dynamic loading
to modify a previous login window. I feel that using the officially recommended method is still very good
but there are still some issues that I have not thought through clearly. , first post the code and study it together. Please see the comments in the code~~
Use Ext .Net and transfer data in Direct mode
Default.aspx:

Copy code The code is as follows:

< ;div id="loading-mask">

Loading...

Ext.app.LoginDialog.js

Copy code The code is as follows:

//LoginDialog class, inherits Ext.Window, the upper object is dynamically instantiated and displayed using new Ext.app.LoginDialog().show().
Ext.define('Ext.app.LoginDialog',{
extend:'Ext.Window',
title: 'Login',
plain: true,
closable: false,
closeAction: 'hide',
width: 400,
height: 300,
layout: 'fit',
border: false,
modal: true,
/ /Use xtype: 'LoginFormPanel' to dynamically instantiate Ext.app.LoginFormPanel, and use api parameters to specify the server-side methods of load and submit. In this example, only submit
items: {itemId: 'loginFormPanel',xtype: 'LoginFormPanel. ',api: {submit: MyApp.ChcekLogin.Check}}
});

Ext.app.LoginFormPanel.js

Copy code The code is as follows:

//Specify the provider for remote calling. Note that it cannot be specified in initComponent, because the config attribute is set before initComponent, and an api not found error will be reported
Ext.direct.Manager.addProvider(Ext. app.REMOTING_API);
//loginForm class, inherits Ext.form.FormPanel, uses alias to register to ComponentMgr, and the upper object is dynamically instantiated using xtype:LoginFormPanel.
//The submit() method of form uses Direct submission. When the upper object instantiates this class, use the api attribute in config to specify the server-side method.
//It is very strange that the api attribute cannot be specified in Ext.define or Ext.apply. If it is specified, it will be lost after instantiation, and then an error that there is no url parameter will be reported. You can only instantiate this class in the upper object. When using the api attribute in config to specify the api
//If you use the original new method to specify the api here, it is also OK. Is it a problem in ext4? If anyone knows, send me an email. Thank you very much~~
//Use Ext.define to define this class, and use initComponent in the definition to specify the operations that need to be performed before instantiation.
//According to the idea of ​​object-oriented programming, this class does not call any upper-level objects, and no scope is specified in the method: this
Ext.define('Ext.app.LoginFormPanel',{
extend:'Ext. form.FormPanel',
initComponent: function(){
//The functions that need to be completed in the initialization part
//alert("Ext.form.FormPanel starts loading...");
// It seems that the attributes obtained by Ext.apply are no different from those defined in Ext.define. Why should I use this?
Ext.apply(this, {
//labelAlign: 'left '
});
this.callParent();
},
alias:'widget.LoginFormPanel',
labelAlign: 'left',
buttonAlign: 'center',
bodyStyle: 'padding:5px',
frame: true, labelWidth: 80,
items: [
{ xtype: 'textfield', name: 'txt1', fieldLabel: 'user name' ,
allowBlank: false, anchor: '90%', enableKeyEvents: true,
listeners: {
keypress: function (field, e) {
if (e.getKey() == 13 ) {
this.nextSibling().focus();
}
} //keypress
}
},
{ xtype: 'textfield', inputType: 'password' , name: 'txt2', fieldLabel: 'User password',
allowBlank: false, anchor: '90%', enableKeyEvents: true,
listeners: {
keypress: function (field, e) {
if (e.getKey() == 13) {
this.nextSibling().focus();
}
} //keypress
}
},
{ xtype: 'textfield', name: 'txt3', fieldLabel: 'Verification Code',
allowBlank: false, anchor: '90%', mixLength: 6, maxLength: 6, enableKeyEvents: true,
listeners: {
keypress: function (field, e) {
if (e.getKey() == 13) {
this.ownerCt.submit();
}
} / /keypress
}
},
{ xtype: 'panel', height: 100, html: '

', border: false },
{ xtype: 'panel', height: 30, html: '

*If the picture is not clear, please click the picture to change the picture

', border: false }
], //items
buttons: [
{ text: 'OK', handler: function () { this.findParentByType('LoginFormPanel').submit(); }},
//This object-oriented programming, do not add scope: this here, otherwise the function will be assigned to the window
{ 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) {
//Use the form parameter to access the form of the original submit
form.reset();
//Use action.result to access the result set
Ext.MessageBox.alert('Login failed', action.result.data);
}
})
}
}
});

The process has been written in the comments. If you have any questions, please discuss them below.