Home > Developer > JavaScript
We recommend that you use Ext. define to define classes in ExtJS4, and use xtype to dynamically load classes.
After modifying a previous login window, I feel that the method recommended by the official website is still very good.
But there are still some questions that you have not thought very clearly. First, paste the code and study it together. Please refer to the comments in the Code ~~
Use Ext +. Net to transmit data in Direct mode
Default. aspx:
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> ExtJS learning </title>
<Link rel = "stylesheet" type = "text/css" href = "ext/resources/css/ext-all.css"/>
<Link rel = "stylesheet" type = "text/css" href = "css/application.css"/>
<Script src = "ext/ext-all.js" type = "text/javascript"> </script>
<Script src = "ext/ext-lang-zh_CN.js" type = "text/javascript"> </script>
<Script type = "text/javascript" src = "ChcekLogin. ashx"> </script>
<Script src = "js/Ext. app. LoginFormPanel. js" type = "text/javascript"> </script>
<Script type = "text/javascript" src = "js/Ext. app. LoginDialog. js"> </script>
</Head>
<Body>
<Div id = "loading-mask"> </div>
<Div id = "loading">
<Div class = "loading-indicator"> loading... </div>
</Div>
<Script type = "text/javascript">
// Ext. Loader. setConfig ({enabled: true });
Ext. onReady (function (){
Ext. BLANK_IMAGE_URL = 'img/s.gif ';
Ext. QuickTips. init ();
Ext. Msg. minWidth = 300;
// Verify the display position of the prompt information
Ext. form. Field. prototype. msgTarget = 'day ';
// If it is an instance that inherits Ext. container. Viewport, it will be automatically rendered to the body after it is new.
// In this example, Ext. app. LoginDialog inherits from Ext. Window. You must call the show () method to display
New Ext. app. LoginDialog (). show ();
// Delete the loading prompt after 250 milliseconds
SetTimeout (function (){
Ext. get ('loading'). remove ();
Ext. get ('loading-mask'). fadeOut ({remove: true });
},250 );
}) // OnReady
</Script>
</Body>
</Html>
Ext. app. LoginDialog. js
Copy codeThe Code is as follows:
// LoginDialog class, inheriting Ext. Window. The upper-layer objects are 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 specify the server method of load and submit using api parameters. In this example, only submit is used.
Items: {itemId: 'loginformpanel ', xtype: 'loginformpanel', api: {submit: MyApp. ChcekLogin. Check }}
});
Ext. app. LoginFormPanel. js
Copy codeThe Code is as follows:
// Specify the Provider for remote call. Note that this parameter cannot be specified in initComponent. Because the config attribute is set before initComponent, the api cannot be found.
Ext. direct. Manager. addProvider (Ext. app. REMOTING_API );
// The loginForm class that inherits Ext. form. FormPanel and registers with ComponentMgr using alias. The upper-layer objects are dynamically instantiated using xtype: LoginFormPanel.
// The submit () method of form uses Direct commit. When the upper-layer object instantiates this class, use the api attribute in config to specify the server method.
// It is strange that it cannot be in Ext. define or Ext. if you specify the api attribute in apply, it will be lost after the instantiation is specified, and an error indicating that the url parameter is not available is reported. You can only use the api attribute in config to specify the api attribute when the upper-layer object instantiates this class.
// If the original new method is used to specify the api here, is it a problem in ext4? Anyone who knows how to send a mail will tell me, thank you very much ~~
// Use Ext. define to define the class. Use initComponent in the definition to specify the operations to be performed before instantiation.
// According to the object-oriented programming idea, this class does not call any upper-layer objects, and scope: this is not specified in the method.
Ext. define ('ext. app. LoginFormPanel ',{
Extend: 'ext. form. FormPanel ',
InitComponent: function (){
// Initialize some functions to be completed
// 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 we use this attribute? Who will teach me?
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: '20140901', 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: '20140901', enableKeyEvents: true,
Listeners :{
Keypress: function (field, e ){
If (e. getKey () = 13 ){
This. nextSibling (). focus ();
}
} // Keypress
}
},
{Xtype: 'textfield', name: 'txt3 ', fieldLabel: 'captcha ',
AllowBlank: false, anchor: '20140901', mixLength: 6, maxLength: 6, enableKeyEvents: true,
Listeners :{
Keypress: function (field, e ){
If (e. getKey () = 13 ){
This. ownerCt. submit ();
}
} // Keypress
}
},
{Xtype: 'panel ', height: 100, html:' <div style = "margin: 5px 0px 0px 84px "> <a href =" # "> </a> </div> ', border: false },
{Xtype: 'panel ', height: 30, html:' <div style = "margin: 5px 0px 0px 84px; color: red "> * If the image is unclear, click Change image </div> ', border: false}
], // Items
Buttons :[
{Text: 'confirmed', handler: function () {this. findParentByType ('loginformpanel '). submit ();}},
// This object-oriented programming. Do not add scope: this here; otherwise, the function will be specified on 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 original submit form
Form. reset ();
// Use action. result to access the result set
Ext. MessageBox. alert ('logon failed', action. result. data );
}
})
}
}
});
The process has been written into the comment. Please discuss the problem below
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
