ExtJS4 では、クラスを定義する際には Ext.define を使用し、以前のログイン ウィンドウを変更するには xtype 動的ローディング を使用することを推奨していますが、公式に推奨されている方法を使用することは依然として非常に良いと感じています が、私が考えていない問題がまだいくつかあります。まずコードを投稿して一緒に勉強してください。コード内のコメントを参照してください~~ Ext .Net を使用し、ダイレクト モードでデータを転送しますDefault.aspx: コードをコピーします コードは次のとおりです。 </script> ; <BR><script type="text/javascript" src="js/Ext.app.LoginDialog.js"><br></head> 🎜><div id="loading-mask"></div> <br><div id="loading"> <br><div class="loading-indicator"><img alt=" " src="ext/resources/主題/images/default/shared/large-loading.gif" width="32" height="32" style="margin-right:8px;" /> 読み込み中...</div> <br><script type="text/javascript"> }) ; <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 から継承しており、それを表示するには show() メソッドを呼び出す必要があります <br>new Ext.app.LoginDialog()。 show(); <br>/ /250 ミリ秒後に読み込みプロンプト情報を削除 <br>setTimeout(function () { <br>Ext.get('loading').remove(); <br>Ext.get('ロードマスク').fadeOut({ 削除: true }), 250) <br>})//onReady <br></body> </html> <br><br> <br>Ext.app.LoginDialog.js <br><br><br><br><br> コードをコピーします <br> </div> <br> コードは次のとおりです<br><div class="codetitle"> <span> //LoginDialog クラス。Ext.Window を継承し、上位オブジェクトは new Ext.app.LoginDialog().show() を使用して動的にインスタンス化および表示されます。 <a style="CURSOR: pointer" data="90290" class="copybut" id="copybut90290" onclick="doCopy('code90290')">Ext.define('Ext.app.LoginDialog',{ <u>extend:'Ext.Window', </u>title: 'ログイン', </a>plain: true, </span>closeable: false, </div>closeAction: 'hide'、<div class="codebody" id="code90290">width: 400、<br>height: 300、<br>layout: 'fit'、<br>border: false、<br>modal: true、<br>/ /Use xtype: 'LoginFormPanel' を使用して Ext.app.LoginFormPanel を動的にインスタンス化し、API パラメーターを使用してサーバー側のロードおよび送信メソッドを指定します。この例では、<br>items: {itemId: 'loginFormPanel', のみを送信します。 xtype: 'LoginFormPanel. ',api: {submit: MyApp.ChcekLogin.Check}} <br>}); <br><br>コードをコピー<br><br><br> コードは次のとおりです:<br><div class="codebody" id="code68263"> <br>//リモート呼び出し用のプロバイダーを指定します。config 属性が initComponent よりも前に設定されているため、initComponent では指定できません。また、API が見つからないというエラーが報告されます。<br>Ext.direct.Manager .addProvider(Ext. app.REMOTING_API); <br>//loginForm クラスは Ext.form.FormPanel を継承し、エイリアスを使用して ComponentMgr に登録し、上位オブジェクトは xtype:LoginFormPanel を使用して動的にインスタンス化されます。 <br>//フォームの submit() メソッドは直接送信を使用します。上位オブジェクトがこのクラスをインスタンス化するときに、config の api 属性を使用してサーバー側のメソッドを指定します。 <br>//Ext.define や Ext.apply で API 属性を指定できないのは非常に不思議ですが、指定した場合はインスタンス化後に失われ、url パラメータがないというエラーが報告されます。 . config の api 属性を使用して API を指定する場合は、このクラスのみインスタンス化できます。//ここで API を指定する場合は、独自の new メソッドを使用しても問題ありません。 ex4で？知っている人はメールを送ってください。よろしくお願いします~~ <br>//Ext.define を使用してこのクラスを定義し、定義内で initComponent を使用してインスタンス化前に実行する必要がある操作を指定します。 <br>//オブジェクト指向プログラミングの考え方に従って、このクラスは上位レベルのオブジェクトを呼び出さず、メソッド内でスコープは指定されません: this <br>Ext.define('Ext.app. LoginFormPanel',{ <br>extend:'Ext.form.FormPanel', <br>initComponent: function(){ <br>//初期化部分で完了する必要がある関数<br>//alert(" Ext.form.FormPanel の読み込みが開始されます..."); <br>// Ext.apply で取得した属性は Ext.define で定義した属性と変わらないようですが、なぜこれを使用する必要があるのでしょうか? <br>Ext. apply(this, { <br>//labelAlign: 'left ' <br>}); <br>this.callParent(); <br>}, <br>alias:'widget.LoginFormPanel', <br>labelAlign : 'left'、<br>buttonAlign: 'center'、<br>bodyStyle: 'padding:5px'、<br>frame: true、labelWidth: 80、<br>items: [ <br>{ xtype: 'textfield '、名前: 'txt1'、フィールドラベル: 'ユーザー名'、<br>allowBlank: false、アンカー: '90%'、enableKeyEvents: true、<br>リスナー: { <br>keypress: function (field, e) { <br>if (e.getKey() == 13 ) { <br>this.nextSibling().focus(); <br>} <br>} //キーを押します <br>} <br>}, <br>{ xtype: 'textfield'、inputType: 'password' 、name: 'txt2'、fieldLabel: 'ユーザーパスワード'、<br>allowBlank: false、アンカー: '90%'、enableKeyEvents: true、<br>リスナー: { <br>keypress: function (field, e) { <br>if (e.getKey() == 13) { <br>this.nextSibling().focus(); <br>} //keypress <br>} <br>}, <br>{ xtype: 'textfield', name: 'txt3', fieldLabel: '検証コード', <br>allowBlank: false, anchor: '90%', mixLength : 6、maxLength: 6、enableKeyEvents: true、<br> リスナー: { <br>keypress: function (field, e) { <br>if (e.getKey() == 13) { <br>this.ownerCt .submit(); <br>} <br>} / /keypress <br>} <br>}, <br>{ xtype: 'パネル'、高さ: 100、html: '<div style="margin: 5px 0px 0px 84px"><a href="# "><img alt="画像が見えにくい場合は、画像をクリックして変更してください。 " onclick="this.src='vcode.ashx?d=' new Date();" id="code" height="82" width="242" src="vcode.ashx" border="0"> ;</a></div>', border: false }, <br>{ xtype: 'panel', height: 30, html: '<div style="margin:5px 0px 0px 84px;color: red">*画像が鮮明でない場合は、画像をクリックして画像を変更してください</div>', border: false } <br>], //items <br>buttons: [ <br>{ text: 'OK', handler: function () { this.findParentByType('LoginFormPanel').submit(); }}, <br>//このオブジェクト指向プログラミングでは、ここにscope: thisを追加しないでください。追加しない場合、関数は次のようになります。ウィンドウに割り当てられます<br>{ text: 'Reset', handler: function () { this.findParentByType('LoginFormPanel').form.reset() } } <br>], <br>submit: function () { <br>if (this .getForm().isValid()) { <br>this.getForm().submit({ <br>success: function (form, action) { <br>window.location = "main .htm"; <br> }, <br>failure: function (form, action) { <br>//form パラメーターを使用して、元の送信フォームにアクセスします <br>form.reset(); <br> //action.result を使用して結果セットにアクセスします<br>Ext.MessageBox.alert('Login failed', action.result.data) <br>} <br>}) <br>} <br>} <br>}); <br><br> <br>質問がある場合は、以下で議論してください。</div> </div>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
