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

私はプロジェクトで jquery を頻繁に使用していますが、今回は主に extjs の使用方法を学習しましたが、既存のチュートリアルは基本的に 2.0 用であり、バックグラウンドで使用される言語は .net プラットフォーム下での C# であることはほとんどありません。バージョン 3.0 のバックグラウンドで C# を使用し、学習プロセスを記録して、同じ考えを持つ友人と話し合って一緒に進歩したいと考えています。
extjs の公式 Web サイトは http://www.extjs.com です。現在の最高バージョンは 3.0.2 ですが、ダウンロード制限がないのはバージョン 3.0.0 だけです。バージョン 3.0 をダウンロードするには、ここをクリックしてください。ダウンロードされた圧縮パッケージには、圧縮された extjs ライブラリ、デバッグに使用されるライブラリ、読み取り可能なソース コード、ドキュメント、サンプルが含まれています。始める前に、サンプル フォルダー内のサンプルを見て、extjs を感覚的に理解してください。サンプルの効果に興奮すると感じたら、一緒に extjs の学習を始めてください。
まず、adpter/ext/ext-base-debug.js、ext-all-debug.js、リソース フォルダー全体など、参照する必要があるファイルを明確にします。 もちろん、ほとんどの場合、ext-base も必要です。 lang -zh_CN.js は中国語のローカリゼーションを実行します。このファイルは src/locale ディレクトリにあります。学習段階なのでデバッグ版を使用しますが、実際のプロジェクトではファイルサイズを小さくするために、公開する際には圧縮版を使用する必要があります。次に、プログラミングの世界における一貫した伝統に従い、最初の Hello world プログラムを開始します。
新しいテキスト ファイルを作成し、ファイル名を Hello.htm に変更し、テキスト エディタで開き、次のコードを記述します:

Hello.htm

コードをコピー コードは次のとおりです:

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

コードをコピーします

コードは次のとおりです。 /* *//* *作成者: Daben

*日付: 2009-10-10

*バージョン: 1.0
*/
Ext.onReady(function(){
Ext.MessageBox.alert("メッセージ","Hello world");
});


ie または ff を使用して Hello.htm を開くと、js アラート ダイアログ ボックスと同じですが、より美しいポップアップ ダイアログ ボックスが表示されます。
コードを見てみましょう。HTML ページでは、最初に extjs の関連ライブラリ ファイルを参照します。次に、独自の js ファイルを参照します。簡単に見てみましょう。Ext.onReady はドキュメントが読み込まれた後にトリガーされ、関数型のパラメーターがあり、イベントがトリガーされたときに関数が呼び出されます。ここでは匿名関数を使用します。もちろん、関数を外部で定義し、関数名をパラメータとして渡すこともできます。 Ext.MessageBox.alert は、メッセージをポップアップするダイアログ ボックス関数です。最初のパラメーターはタイトル、2 番目のパラメーターはダイアログ ボックスの内容です。 Ext.Message クラスには、JS プロンプト ダイアログ ボックスと comfirm ダイアログ ボックスをシミュレートするメソッドもあります。確認メソッドの効果を確認するために daben.js を変更してみましょう:

コードをコピー

コードは次のとおりです: Ext.onReady(function(){ //Ext.MessageBox.alert("Message" ,"Hello world");

Ext.MessageBox.confirm("comfirm","JS 確認ダイアログ ボックスをシミュレート", function(btn){

alert("「ボタン」をクリックしました);
});
});

実際の Web プログラムでは、サーバーにデータを送信し、サーバーの応答に基づいてページのコンテンツを更新する必要があります。 extjs がそれを実装する方法を見てください。以下の例では、ページ上に編集ボックスとボタンを配置します。ボタンがクリックされると、サーバーは編集ボックスに入力された内容を大文字に変換し、ページ上の div に表示します。 vs2008 を開き、新しい Web アプリケーション ExtjsDemo を作成し、自動的に追加されたdefault.aspx ファイルを削除します。図に示すように、hello.htm ファイルと daben.js ファイル、および使用する extjs ライブラリを追加します。

の下に vvswd- が追加されていることがわかります。 ext_2.0.2.js のファイルは、こちら からダウンロードできます。このファイルは、プログラミングに便利な vs2008 のスマート プロンプトを実装できます。バージョン 3.0 用のものが見つかりませんでした。友人が見つけたら、コピーを送ってください。)まず、サーバーとの通信を実装する extjs の関数である Ext.Ajax.request を見てみましょう。この関数はパラメータとして json オブジェクトを受け取ります。このオブジェクトには、よく使用される属性がいくつかあります。
url: リクエストを示す文字列タイプ。アドレス
パラメータ: リクエスト時にサーバー セグメントに渡されるパラメータ。オブジェクト、文字列にすることができます。
メソッド: リクエスト メソッド、文字列タイプ、「GET」または「POST」。大文字にする必要があることに注意してください。
成功: 関数タイプ、リクエストが成功した後に実行される関数。関数には 1 つのパラメータがあり、サーバー側の応答データを含む XMLHttpRequest オブジェクトです。
失敗: 関数タイプ、リクエストが成功した後に実行される関数。リクエストは失敗します。関数には 1 つのパラメータがあります。パラメータはサーバー側の応答データを含む XMLHttpRequest オブジェクトです。
コールバック: 関数の種類。リクエストの結果に関係なく実行されます。
さて、extjs の仕組みを見てみましょう。サーバーと対話します。まず、hello.htm ページに次の変更を加えます:

コードをコピーします コードは次のとおりです:

Extjs hello world ダイアログ



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

" id=" txt" />

body>



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

コードをコピー コードは次のとおりです: ///

/** //*

*作成者: 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 をプロジェクトに追加し、ページの最初の行にページ処理命令を すべて削除します。 F7 を押してコード ページに切り替え、バックグラウンド コードの記述を開始します。同様に、データを処理する前に、最初にフロント デスクから渡されたデータを取得します。ここでは、データが空であるか空の文字列であるかを単純に確認します。次に、Response.Write メソッドを使用して、処理された結果をクライアントに送信します。バックグラウンド コードは次のとおりです:

コードをコピー コードは次のとおりです:

using System ;

/**//*
*作成者: Daben
*日付: 2009-10-10
*バージョン: 1.0
*/
名前空間 ExtjsDemo
{
パブリック部分クラス Hello : System.Web.UI.Page
{
ページの読み込み #regionページの読み込み
/ **////

/// ページの読み込み
///

/// >///
protected void Page_Load(object sender, EventArgs e)
{
string data = Request.Params["data"] ;
if(!string.IsNullOrEmpty(data))
{
Response.Write(data.ToUpper());
}
}
#endregion
}
}

実行後、編集ボックスに文字列を入力すると、以下の div に大文字で表示されることがわかります。FF の Firebug を通して、データの相互作用を確認できます。
クライアントから渡されたデータを受け入れて処理するために aspx ページを使用することに加えて、Web サービスを使用することもできます。 Web サービスをプロジェクトに追加します。コードは次のとおりです:

コードをコピーします コードは次のとおりです:

System を使用;
System.Web.Services を使用

/**////

/// HelloService の概要説明
///

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// ASP.NET AJAX を使用してスクリプトからこの Web サービスを呼び出せるようにするには、次の行のチェックを外します注釈。
// [System.Web.Script.Services.ScriptService]
public class HelloService : System.Web.Services.WebService
{
受信文字列を大文字に変更します #region が渡されます入力された文字列を大文字に変換
/**/

名前空間 ExtjsDemo
{
/***////
/// 大文字に変換する必要がある文字列
/// >
/// 大文字に変換する必要がある文字列// / 大文字の文字列
[WebMethod]
public string ToUpper(文字列データ)
{
if(!string.IsNullOrEmpty( data))
return data.ToUpper();
throw new Exception("文字列を空にすることはできません!");
#endregion
}
}


もちろん、デフォルトでは、Web サービスはデータを XML 形式で配信し、Firebug を通じて確認できます。 XML は非常に優れており強力ですが、場合によってはより小さな JSON しか必要としないことがあります。では、Web サービスで JSON 形式を配信するにはどうすればよいでしょうか。リクエスト ヘッダーの Content-Type を application/json に設定し、Ext.util.JSON.encode を使用してパラメーターをエンコードするか、params の代わりに jsonData を使用するだけです。