Extjs学習メモ2：初めてのExtjs入門：Form_extjs-jsチュートリアル-php.cn

Extjs のフォーム コンポーネントは Ext.form.BasicForm ですが、最も単純で最も一般的に使用されるのは Ext.form.FormPanel コントロールです。これは、Panel を継承し、特定のインターフェイス表示コントロール機能を備えています。これには、実行用の BasicForm オブジェクトが含まれています。サーバー、ロード、その他のアクション。 Extjs は、一般的に使用される HTML フォーム項目もカプセル化し、データ検証などの追加機能を提供します。実際に使用する場合は、これらのフォーム項目を FormPanel に追加するだけです。一般的なフォーム項目には、TextField、NumberField、Radio、CheckBox などが含まれます。

以下では、例を使用して基本的な Form の使用方法を紹介します。フォームを使用するにはサーバー側プログラムと対話する必要があるため、便宜上、次に示すように、新しい asp.net サイトを作成し、すべての extjs ファイルをサイトに追加して、このサンプル ファイルとして新しい Forms.htm ファイルを作成します。 🎜> 以下の Forms.htm にコードを追加します。主にフォーム項目を FormPanel に追加します:

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

Extjs FormPanel .allow-float{clear:none ! important;} .stop-float{ clear:both ! important;} .float-left{float:left;} Ext.onReady(function() { Ext.BLANK_IMAGE_URL = 'ext-3.1.0/resources/images/default/s.gif'; Ext.QuickTips.init(); //初期化情報提示機能 var loginForm = new Ext.form.FormPanel({ title: 'A Simple FormPanel', height: 300, width: 300, frame: true, labelSeparator: ':'、 labelWidth: 60、 labelAlign: 'right'、 applyTo: 'form'、 items: [ new Ext.form.TextField({ id: 'Name', fieldLabel: 'Name', allowBlank: false, blankText: '必須充填文字段', msgTarget: 'qtip' })、 new Ext.form.TextField({ id:'Password', fieldLabel: 'Password', allowBlank: false, inputType: 'password', blankText: '必須充填文字段', //msgTarget: 'qtip' msgTarget: 'side' }), new Ext.form.TextField({ id: 'email', fieldLabel: 'E-Mail'、 allowBlank: false、 selectOnFocus: true、 inputType: 'Text'、 msgTarget: 'side'、emptyText: '必須入力文字段' 、 正規表現: /^([w] )(.[w] )*@([w-] .){1,5}([A-Za-z]){2,4}$/, regexText: 'Email 格式不当确' }), new Ext.form.NumberField({ id: 'age', fieldLabel: 'Age', allowNegative : false, 10 進数精度: 0, maxValue: 100, maxText: '入力された数字最大是 100' }), new Ext.form.TextArea({ id: 'remark', fieldLabel: 'remark', width: 200 }), new Ext.form.Radio({ name: '性別', itemCls: 'float-left'、 clearCls: 'allow-float'、 fieldLabel: 'Sex'、 boxLabel: ' Male' })、 新しい Ext.form。 Radio({ name: 'sex', clearCls: 'stop-float', boxLabel: ' Female', hideLabel: true })、 新しい内線。 form.Checkbox({ name: 'hobby', clearCls: 'allow-float', itemCls: 'float-left', boxLabel: 'サッカー', fieldLabel: '趣味' })、 new Ext.form.Checkbox({ name: '趣味', clearCls: 'allow-float', itemCls: 'float-left' , hideLabel: true, boxLabel: 'ピンパン' }), new Ext.form.Checkbox({ name: 'hobby', clearCls: ' stop-float', hideLabel: true, boxLabel: 'バスケットボール' }) ], ボタン: [new Ext.Button({ text: 'OK' 、 ハンドラー: ログイン }) ] }); function login() { loginForm.getForm().submit({ clientValidation: true, waitMsg: 'お待ちください...', waitTitle: 'ヒント', url: 'simpleForm.ashx', method: 'GET', success: function(form, action) { Ext.Msg.alert('Hint', 'Get Success:あなたの名前is ' action.result.msg.Name " Pwd: " action.result.msg.Password); }, failure: function(form, action) { Ext.Msg.alert('Hint) ', '取得失敗' action.failureType); } }); }; });

FormPanel を構築するときは、applyTo 属性を通じてパネルをロードする領域を指定する必要があります。通常、applyTo の値は div の ID です。 FormPanel の items プロパティは、フォーム項目の配列です。 TextField では空を許可するかどうかを指定でき、NumberField では最大値と最小値の制限も指定できます。これらのフォーム項目の itemCls 属性と clearCls 属性に注目してください。これらの属性を使用してフォーム項目に CSS を付加し、必要な効果を実現できます。このうち itemCls はフォーム項目自体に付加され、clearCls はフォーム項目の隣の空の div に付加されます。ボタンオブジェクトは、buttons 属性に追加できます。ここまでは送信関数を無視します。 このフォームはより一貫した外観を持ち、さらに extjs についての共通の検証関数も備えています。フォームバリデーション機能は後ほど紹介します。以下にフォーム送信について説明します。フォームの送信は、Basicform の submit メソッドに依存します。 BasicForm は、FormPanel の getForm メソッドを呼び出してから、その submit メソッドを呼び出すことによって取得できます。submit メソッドの主なパラメータは、送信する URL アドレス、送信メソッド GET/POST、および 2 つの処理関数 success と success after です。提出の失敗と成功。これら 2 つの処理関数には 2 つのパラメータがあり、1 つは現在のフォーム、もう 1 つは Action オブジェクトで、主に失敗タイプ、failureType、サーバーなど、この送信 (または読み込み) の主要な情報を記録します。端末の情報結果を返します。 FailureType には、Action.CLIENT_INVALID、CONNTECT_FALIURE、LOAD_FALURE、SERVER_INVALID を指定できます。これらは Action で定義されたパブリック プロパティであり、実際には文字列です。以下では、主にサーバーから返される結果について説明します。デフォルトでは、サーバーは json 文字列を返す必要があり、属性の 1 つは boolean を示します。残りの属性は、他のカスタマイズされた戻りデータにすることができます。

たとえば、次はサーバーから返されるサンプルです: コードをコピー コードは次のとおりです。 : { "success":true, // これは文字列ではなくブール値であることに注意してください "msg":"正常に更新されました!"

以下 この htm ページのサーバー応答ページを作成し、新しい汎用ハンドラー ページ SimpleForm.ashx を作成します。この応答は非常に単純です。つまり、送信された名前とパスワードをクライアントに返します。返されるデータは次のようになります:

{success:true,msg:{Name:xxx,Password:xxxx}}

この応答は次のように記述する必要があります:

コードをコピー コードは次のとおりです。 public void ProcessRequest (HttpContext context) { string s = context.Request .Params["名前"]; 文字列 pwd = context.Request.Params["パスワード"]; if (s == null) s = "null"; result = "{success :true,msg:{Name:"" s "",Password:"" pwd ""}}"; context.Response.ContentType = "text/plain"; Response.Write(result ); }

プログラムを実行し、必要な情報を入力して [OK] ボタンをクリックすると、サーバーから返されたデータが表示されます: 最後に、サーバーからフォーム情報を取得し、クライアント フォームにデータを入力する方法を紹介します。クライアントに入力するには、BasicForm のロード メソッドが使用されます。このメソッドには、デフォルトでサーバーからの json 文字列が必要ですが、残りはフォーム フィールドの情報です。属性とフォーム項目が同じ名前の場合、この入力プロセスは自動的に完了するため、非常に便利です。このフォームにロード ボタンを追加して、サーバーからフォーム情報を取得します: コードをコピー コードは次のとおりです: ボタン: [new Ext.Button({ text: 'OK', ハンドラー: ログイン })、 new Ext.Button({ text: 'Load', handler:loadData }) ]loadData のメソッドは次のとおりです: functionloadData() { loginForm.getForm().load({ clientValidation: false, waitMsg:'Loading...', url: 'simpleFormLoad.ashx', method: 'GET' }); data があるため、 clientValidation を false に設定します。対応する simpleFormLoad.ashx サーバー側コードは次のとおりです。

public void ProcessRequest (HttpContext context) { context.Response.ContentType = "text/plain"; context.Response.Write(" { success:true,data:{Name:"ServerReply",age:10,email:"yinzixin1985@hotmail.com"}}"); }

[読み込み] ボタンをクリックし、以下が表示されます:

データはサーバーからスムーズに返され、フォームに自動的に入力されます。

この記事では、主に extjs フォームの基本概念とサーバーと簡単に対話する方法を紹介します。これらの内容だけでは実際のニーズに応えるには不十分です。以下の記事で、より実践的な内容を紹介します。