2012-09-18 55 views
2

我想讓ExtJS組合框返回值而不是顯示值。ExtJS Combobox發佈hiddenName值

這是我的問題。我使用ajax來獲取組合框的數據,同時使用getForm()。load來加載組合框的選定值。在模型中,我返回了一個顯示值和代碼值。顯示值分配給'name',代碼值分配給'hiddenName'。提交數據時,顯示值不是來自'hiddenName'字段的代碼值。

更改了組合框的選擇後,正在提交代碼值。

下面的代碼:

{ 
      xtype: 'combobox', 
      fieldLabel: 'Type', 
      name: 'DataType', 
      hiddenName: 'DataTypeCde', 
      store: Ext.create('Ext.data.JsonStore', { 
       proxy: { 
        type: 'ajax', 
        actionMethods: { create: 'POST', read: 'POST', update: 'POST', destroy: 'POST' }, 
        url: '@Url.Content("~/{URL}/DataType")', 
        reader: { 
         type: 'json' 
        } 
       }, 
       fields: ['Id', 'Name'] 
      }), 
      valueField: 'Id', 
      displayField: 'Name', 
      typeAhead: true, 
      mode: 'remote', 
      emptyText: 'Select a data type...', 
      anchor: '96%' 
     }, 

的另一件事是,當我設置「名稱」爲「DataTypeCde」的代碼值得到展示,但一旦對ComboBox ajax的數據得到加載,顯示值然後被顯示值替換。

因此,我可以獲取'hiddenName'來加載DataTypeCde值並將此值回傳,或者獲取組合框數據以預加載表單呈現。

有人可以指出是否有方法或我做錯了什麼,以防止代碼值被回發。

更新: * UPDATE4:(後加入響應樣本) *

讓我解釋一下我想達到更好的。

(1)在按照上面的代碼將被顯示... 如果數據類型=購物和DataTypeCde = SP 渲染會顯示購物,這是我多麼希望這是後組合框。 但是,一旦我將這個結果提交給控制器,「購物」將被返回而不是「SP」...這不是我想要的。 POST響應的

實施例...

id=1&DataType=Shopping

(2)同設定爲 「DataTypeCde」,這將是以下結果的名稱字段... 如果datatype =購物和DataTypeCde = SP 渲染後的組合框將顯示SP,這不是我想要的,因爲我想顯示文本而不是代碼。 但是,一旦我將結果提交回控制器,代碼「SP」就會返回,這就是我的意圖。 POST響應的

實施例...

id=1&DataTypeCde=SP

(3)通過使用設置名稱字段的第二方法爲「DataTypeCde」我們將得到直到代碼顯示的結果組合框數據被加載。所以要解決這個問題,我已經將「autoLoad」特性設置爲true,所以組合框數據將自動加載到渲染中。此時ExtJS會將顯示的「SP」代碼替換爲「Shopping」的顯示值。 但是這個解決方案的一個問題是需要在開始時加載所有的組合框會顯着降低頁面加載速度。 POST響應

例...

id=1&DataTypeCde=SP

(Q)我的問題是...有沒有一種方法來設置顯示值顯示爲組合框,但不加載組合框數據,但將代碼值取回顯示值而不是顯示值。

UPDATE2:

很抱歉的混亂,我忘了提我使用ASP.NET MVC4與ExtJS的。在我提到將回帖後回覆給控制員的情況下。我的意思是MVC控制器。我不認爲後端與這個問題有關。

UPDATE3:

給我實現的更大的圖片下面是我用來加載代碼的形式和數據樣本。

example2.getForm().load({ 
    url: '@Url.Content("~/{URL}/Data/")', 
    params: { 
     id: window.record.data['id'] 
    }, 
    method: 'POST' 
}); 

上述載荷JSON的集合對象與此類似...

{"success":true,"data":{"id":"1","DataType":"Shopping","DataTypeCde":"SP"}}

下面是阿賈克斯的數據組合框代碼...

store: Ext.create('Ext.data.JsonStore', { 
      proxy: { 
       type: 'ajax', 
       actionMethods: { create: 'POST', read: 'POST', update: 'POST', destroy: 'POST' }, 
       url: '@Url.Content("~/{URL}/DataType")', 
       reader: { 
        type: 'json' 
       } 
      }, 
      fields: ['Id', 'Name'] 
     }), 

結果像這樣的json對象...

[{"Id":"SP","Name":"Shopping"}]

感謝

回答

2

我不太清楚你真正想要的...

name 這包括現場時被用作參數名form.submit()中的值。如果沒有配置名稱,則返回到inputId。爲了防止字段被包含在表單提交中,請設置submitValue:false(這適用於任何字段類型)。

hiddenName 一個的名稱底層隱藏領域,這將是同步與組合的底層值。

valueField它包含與name屬性一起提交的價值基礎字段的名稱。

displayField其中包含顯示該值的底層字段的名稱。

您的設置,你應該提交兩個值:

submitValue: true

  • 的數據類型的valueField的值(*爲防止設置submitValue: false *)
  • DataTypeCde與displayField的價值(防止刪除hiddenName

評論基於編輯

...提交這一結果返回給控制器...

你是什麼意思與提交給控制器?您的問題聽起來並不常見,我認爲您只是以錯誤的方式進行操作......「購物」是商店名稱字段的值,標識爲Id字段的值?

編輯

有沒有一種方法來設置顯示值顯示爲組合框 無需加載組合框數據

基本上不...你可以設定值屬性這是顯示的那個,但那將是在那種情況下承諾的那個。

但將代碼值取回顯示值而不是顯示值。

不。沒有代碼值。基本上有一個價值場將是該領域的價值。

對於下面我假設組合店裝有以下值{"id":"SP","Name":"Shopping"}

現場就像一個本地的HTML場接收的值時,這意味着你有一個。現在,當你使用隱藏名稱,在你的情況下,數據類型以及名稱,你的情況DataTypeCde你可以設置這個字段DataType=SP這將導致顯示服務。爲什麼 - >該值導致商店內查找。如果沒有找到該記錄,則會顯示該鍵。這意味着如果您將此組合設置爲DataType=AP,則不會找到會導致組合顯示AP的值。

你的回報

{"success":true,"data":{"id":"1","DataType":"Shopping","DataTypeCde":"SP"}}

包含重複的數據。您只應提交組合名稱以及valueField值。它應該看起來像

{"success":true,"data":{"id":"1","DataType":"SP"}}

這將導致組合顯示購物因爲它將會被自動商店內查找的關鍵SP

,不要忘記:

  • 建議不要將字符串用作Id字段。
  • 默認idProperty設置爲id。在你的情況下,這可能導致任何查找失敗。我建議你設定儲存讀者中idPropertyidProperty: 'Id'

    reader: { type: 'json', idProperty: 'Id' }

+0

感謝@sra,爲突出對我來說,關鍵術語,非常有幫助。我也嘗試了通過添加submitValue:false並刪除hiddenName的建議。但是這隻會阻止這個領域一起提交。從你的建議,我試圖找到一個提交這個[post](http://stackoverflow.com/questions/5423136/extjs-how-to-submit-both-combobox-value-文字),但沒有運氣。 –

+0

@ STi88我編輯了我的帖子 – sra

+0

感謝@sra爲您提供持續的支持。你可能是對的,我這樣做的方式是錯誤的,這可能是因爲我想要做的是不常見的......我已經添加了更多的實現細節,希望有人能指點我正確的道路。 –