2017-06-10 11 views
2

私はextjsフレームワークで作成されたユーザーフォームを持っています。ユーザーフォームには、リクエストペイロードの一部としてRESTコントローラに渡される多数のユーザーフィールドがあります。 ユーザーフォームにグリッドパネル(おそらく複数の行が複数の表形式である&列)を追加しようとしています。 しかし、リクエストペイロードの一部としてグリッドパネルデータをRESTコントローラに渡す方法がわかりません。 詳細が必要な場合は、私はより多くのコードを掲載します。 ご協力いただければ幸いです。ありがとう。グリッドパネルデータを要求ペイロード経由でRESTコントローラに渡す

Ext.define('soylentgreen.view.admin.UserForm', { 
    extend : 'Ext.form.Panel', 
    alias : 'widget.userform', 
    bodyStyle : 'padding:5px 5px 0', 

// some userform elements like firstname,lastname, go here..... 

name : 'userTeamGrid', 
    xtype : 'gridpanel', 
id : 'userTeamGrid', 
itemId : 'userTeamGrid', 
multiSelect : true, 
selModel : Ext.create(
     'Ext.selection.CheckboxModel', 
     { 
      injectCheckbox : 'first', 
      mode : 'MULTI', 
      checkOnly : false 
     }), 
anchor : '100%', 
width : '700px', 
height : 250, 
flex : 1, 
store : 'userTeamStore', 

var user = form.getRecord(); 
form.updateRecord(user); 
user.save({ 
     callback : function(records, operation){ 
      //reset the (static) proxy extraParams object 
      user.getProxy().extraParams = { 
      requestType: 'standard' 
      } 
      if(!operation.wasSuccessful()){ 
      var error = operation.getError(); 

答えて

1

これは、私たちがExtJSで直面する最も複雑で一般的な問題の1つです。それはしばしば解決されなければならないが、ほとんどの解決策は正確な要求に応じてわずかに異なる必要がある。

グリッドは、単一のレコードではなくフルストアにバインドされています。したがって、レコード(たとえば配列として)からグリッドにデータを取得する場合や、その逆の場合は、ストアのデータとレコードの単一フィールドの値をマッピングする必要があります。例えば。ストアからすべてのデータを取得し、一般的な解決策は、あなたが唯一のグリッドの選択(多分あなたはcheckboxselectionモデルまたは類似を使用したい)、および/またはレコードの唯一の特定のフィールドが必要な場合は、あなたがする必要がある

store.getRange().map(function(record) { return record.getData(); }); 

ですこのコードを必要に応じて変更します。

grid.getSelectionModel().getSelection().map(function(record) {return record.get('Id'); }); 

したがって、レコードはフォームにバインドされ、フォームはフィールドで構成されます。どのようにしてグリッドデータをフォームの一部として受け入れるのですか?

あなたのフォームにhiddenfieldを追加して、あなたの要求に応じて、4つの機能setValueの一部、getValuegetModelDatagetSubmitValueを上書きする必要があります。通常、hiddenfieldはその値を文字列に変換しようとしますが、明らかにその配列を許可する必要があります。 setValueが呼び出されるたびにグリッドを変更するか、getterの1つが呼び出されるたびにグリッドから値を読み取ります。 4つの関数は、次の場合に使用されます。

  • setValueは、レコード内の値に基づいてグリッドを変更するために使用します。
  • getValueは、値が変更されたかどうかをチェックします(つまり、フォームがダーティであり、送信されなければならないかどうかをチェックします)。form.getValuesを呼び出した場合。その中のグリッド状態に基づいて値を返す必要があります。
  • getModelDataは、form.updateRecordメソッドで使用されます。モデルフィールドのconvertメソッドが動作できる値を返す必要があります。
  • getSubmitValueform.submit方法で使用され、それが安全にサーバーへ送信することができる値を返す必要があり

私はあなたを与えることはできません(フォームがsendAsJson:true設定されていない場合は、文字列である必要があります)これらの実装の正確なレシピは、要件に固有のものです。

+0

詳細な対応をありがとうございます。私はあなたが説明した方法でコーディングしようとしています。 グリッドデータが変更されたときにsetValueを隠しフィールドで呼び出すときに、ユーザフォームで配列をバインドするためのxtypeを として作成しました。 データは配列値ではなく[オブジェクト、オブジェクト]として保存されます。 。 そのデータをhiddenfieldに正確な配列として格納する方法を教えてもらえますか? –

+0

@PoonkodiSivapragasam私が言ったように、配列を受け入れるように、setValue関数をオーバーライドする必要があります。 – Alexander

+0

オーバーライドしようとすると、エラーext-all.js以下になります。15 Uncaught TypeError:Object.override(ext-all.js:15)で定義されていない '$ className'の未定義の を読み取ることができません。私のコードに何が間違っているのか教えていただけますか? Ext.override( 'Ext.form.field.Hidden'、{ setValue:function(val){ this.callParent(['オーバーライド']); これを返す; } }); –

関連する問題