如何在extjs中格式化組合？

Question

我在ext js中有一個組合框，它是動態填充的。沒有什麼非常複雜的......並且它正確填充。這是組合的顯示值的結構：

Name: [dynamicName] 
Gender : [dynamicGender] 
Age: [dynamicAge] 

的目標是有名稱：，性別：年齡和：內<b></b>標籤。動態值應該在正常文本中。 假設我定義了一個數組，我將從中填充組合數據存儲。這是陣列：

var arr=[[id1, <b>Name:</b>],[id2, <b>Gender:</b>],[id3, <b>Age:</b>]] 

事情是當我點擊下拉列表中，他們顯示正確的。只要用戶選擇一個選項，讓我們說名稱...在選定的選項中，格式化會全部錯誤。我的意思是，粗體文本沒有顯示。而是顯示字符串文字<b>Name:</b> dynamicName。

如何使用tpl語法解決此問題？

Answer 1

你可以用css解決這個問題。這裏有一種方法：

在配置組合框，添加：

itemCls: 'make-bold' 

（或名稱該類任何你想要的）

然後，在樣式表中，添加（使用同名）：

.make-bold input { 
    font-weight: bold; 
} 

這將風格你輸入框（你從下拉列表框）在大膽後選擇的顯示內容。

Answer 2

雖然選項列表由<div>元素組成，因此允許造型，但該字段本身只是一個<input>元素，並且這些元素不支持內容樣式。

所以答案是：不，你不能。

擴展的答案是：我敢肯定有人做了一個組合框的替代實現，它使用了不同的HTML標記，並允許在該字段中的樣式化內容。試試問ExtJS論壇。

Answer 3

我有類似的問題。我想在組合列表大膽幾個選擇，但我不希望在輸入HTML標記時，選擇的值：

1.使用模板作爲this tutorial解釋了，看使用模板更改組合框項目的外觀。

或者

2.使用一個選擇聽者和正則表達式。你可以在「select」事件上放置一個監聽器，然後簡單地使用一些正則表達式來去除HTML標籤，如/< [/>] />，以從輸入字段中移除HTML標籤。現在，用於格式化列表的HTML不會影響輸入。