Как отформатировать комбо в extjs?

Question

У меня есть поле со списком в ext js, которое заполняется динамически.Ничего очень сложного ... и оно заполняется правильно.Это структура отображаемых значений комбо:

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

Цель состоит в том, чтобы иметь тег Name :, Gender: and Age: inside <b></b>.Динамические значения должны быть в обычном тексте.Допустим, я определил массив, из которого я буду заполнять хранилище данных комбо.Это массив:

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

Дело в том, что когда я щелкаю раскрывающийся список, в списке они отображаются правильно.Как только пользователь выберет опцию, скажем, Name ... в выбранной опции, форматирование пойдет не так.Под неправильным я имею в виду, жирный текст не отображается.Вместо этого отображается строковый литерал <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.Используйте шаблон в качестве , который объясняет этот учебник , см. Использование шаблонов для изменения вида элементов комбинированного списка .

Или

2.Используйте Select Listner и Regex .Вы можете поместить слушателя в событие " select ", а затем просто использовать некоторое регулярное выражение для удаления тегов HTML, таких как / <[^>] *> / g , чтобы удалить теги HTML из вводаполе.Теперь ваш HTML-код, используемый для форматирования списка, не повлияет на ввод.