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" />







< ;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 メソッドを使用して、処理された結果をクライアントに送信します。バックグラウンド コードは次のとおりです:

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

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
{
/***////
/// 大文字に変換する必要がある文字列
/// /// 大文字に変換する必要がある文字列< ;/param>// / 大文字の文字列
[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 を使用するだけです。