extjs勉強記(1) 基礎知識_extjs

equiv="Content-Type" content="text/html;charset=utf-8" />







< ;script type= "text/javascript" src="js/daben.js">

" id=" txt" />





次に、変更後のコードは次のようになります:

*作成者: Daben
*日付: 2009-10-10
*バージョン: 1.0
*/

Ext.onReady(function() {
//Ext.MessageBox.alert("メッセージ","Hello world");
/**//*Ext.MessageBox.confirm("comfirm","JS 確認ダイアログ ボックスをシミュレート", function(btn){
alert(""btn "ボタン" をクリックしました);
});* /
Ext.get("btn").on("click", function() {
var data = Ext.fly("txt").getValue();
if (data == "") {
Ext.Msg.alert("警告", "文字列を入力してください")
}
else {
Ext.Ajax.request ({
url: " hello.aspx",
params: { data: data },
method: "POST",
success: function(response) {
Ext.fly( "div").update(response .responseText);
},
failure: function(response) {
Ext.Msg.alert("Error", "リクエストは失敗しました。エラー コードは次のとおりです: " 応答.ステータス);
}
});
}
});
});


このファイルを簡単に分析してみましょう。最初の行は vs のスマート プロンプトを使用します。パスを正しく書くことに注意してください。パスを最初の行に追加する必要があります。 Ext.onReady は Ext.Element.fly の略称で、Ext では Element クラスをカプセル化して追加するメソッドです。 some 使いやすい操作性を備え、主要なブラウザと互換性があります。 getValue は要素の値を取得するための Element クラスのメソッドですが、対応する setValue メソッドがないため、後で update メソッドを使用して要素の値を更新します。値をサーバーに渡す前にクライアントを検証することは、プログラミングの良い習慣です。ここでは、文字列が空でないことを確認してから、前述の Ext.Ajax.request メソッドを使用します。データは に送信されます。 post モードの hello.aspx ページ。ここでは、json オブジェクトの形式で送信します。成功した応答の場合は、応答のテキストが div に表示されます。 、ポップアップダイアログボックスとエラーコードが表示されます。
次のステップは、サーバー側プログラミングを実行することです。サーバーはクライアントから渡されたデータを受け入れ、aspx ページと Web サービスを使用する 2 つの方法で応答できます。まず、aspx ページを使用して処理する方法を紹介します。ページ Hello.aspx をプロジェクトに追加し、ページの最初の行にページ処理命令を <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Hello.aspx.cs" Inherits= に追加します。 "ExtjsDemo .hello" %>すべて削除します。 F7 を押してコード ページに切り替え、バックグラウンド コードの記述を開始します。同様に、データを処理する前に、最初にフロント デスクから渡されたデータを取得します。ここでは、データが空であるか空の文字列であるかを単純に確認します。次に、Response.Write メソッドを使用して、処理された結果をクライアントに送信します。バックグラウンド コードは次のとおりです:
実行後、編集ボックスに文字列を入力すると、以下の div に大文字で表示されることがわかります。FF の Firebug を通して、データの相互作用を確認できます。
クライアントから渡されたデータを受け入れて処理するために aspx ページを使用することに加えて、Web サービスを使用することもできます。 Web サービスをプロジェクトに追加します。コードは次のとおりです: