Как форматировать комбо в 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>, и они не поддерживают стиль контента.

Итак, ответ: нет, вы не можете.

Расширенный ответ: Я уверен, что кто-то сделал альтернативную реализацию компонента combobox, который использует разную разметку HTML и позволяет создавать стилизованные материалы в поле. Попробуйте спросить на форумах ExtJS.

Answer 3

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

1. Используйте шаблон, как this tutorial объясняет, см Использование шаблонов для изменения внешнего вида элементов со списком.

Или

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