Поле со списком ExtJs 4 с флажками

Я ищу элемент управления со списком EXTJS4, который позволяет выбирать несколько элементов с помощью флажков внутри.

На самом деле мне нужен этот элемент управления http://lovcombo.extjs.eu/, но он реализован для ExtJs3. Я попытался преобразовать его в ExtJs4, но на самом деле задача нетривиальна.

Не могли бы вы предложить аналогичный компонент для ExtJs4. Или, может быть, вы могли бы указать мне на какой-нибудь учебник или пример - как делать такие вещи?


checkbox combobox custom-controls extjs4
person Andrey Selitsky    schedule 06.07.2011    source источник

Ответы (2)


arrow_upward
17
arrow_downward

Комбинация множественного выбора с флажком в ExtJS4.0 может быть достигнута добавлением нескольких строк кода.

В основном вам нужно использовать существующий класс css, который применяется во время выбора и отмены выбора элемента и нажатия изображения (изображения флажка) в это время соответственно.

«x-boundlist-item» и «x-boundlist-selected» — это классы, взятые из ext-all.css.

<style>

.x-boundlist-item img.chkCombo {
    background: transparent url(/lib/extjs-4.1.0/resources/themes/images/default/menu/unchecked.gif);
}
.x-boundlist-selected img.chkCombo{
    background: transparent url(/lib/extjs-4.1.0/resources/themes/images/default/menu/checked.gif);
}

</style>
<head>

Ext.create('Ext.form.ComboBox', {
        id: 'BCCAddress',
        name: 'BCCAddress',
        maxHeight: 150,        
        width: 210,
        multiSelect: true,
        emptyText : "Select Bcc email addresses",
        renderTo: 'extBCCAddress',
        store: myArrayStore,
        displayField: 'fieldName',
        valueField: 'fieldName',
        forceSelection: true,
        editable: false,
        mode: 'local',
        triggerAction: 'all',
        listConfig : {          
            getInnerTpl : function() {
                return '<div class="x-combo-list-item"><img src="' + Ext.BLANK_IMAGE_URL + '" class="chkCombo-default-icon chkCombo" /> {fieldName} </div>';
            }
        }
    });

[ниже приведено изображение этого пользовательского компонента]
введите здесь описание изображения

person Subrata Nath    schedule 06.07.2012
comment
Я использую v4.2.1.883 (не уверен, имеет ли это значение), но приведенный выше код не работал, пока я не добавил высоту и ширину 16 пикселей к каждому из стилей выше. Я также переместил изображение в свой каталог /Images (не уверен, что это имело значение). Мне действительно интересно, что было бы лучшим способом сделать это, чтобы вам не приходилось жестко ссылаться на путь к ресурсу extjs? - person Peter Kellner; 02.09.2013
comment
В ExtJS 4.2.1 (и, возможно, в других версиях) вам не нужно жестко кодировать путь к ресурсу. Вместо этого поместите стили в файл SCSS (например, sass/etc/all.scss) и используйте background: Transparent url(images/menu/checked.gif);. Похоже, что в 4.2.1 мы должны явно указать ширину и высоту 16 пикселей, как упоминал Питер. - person Yohan Liyanage; 26.09.2013
comment
@PeterKellner говорит: «Вы должны добавить к своему стилю высоту и ширину 16 пикселей. Работает у меня на extjs 4.2.2. - person Ben Lim; 30.05.2014

arrow_upward
7
arrow_downward

  1. используйте это: http://www.sencha.com/forum/showthread.php?134751-Ext.ux.form.field.BoxSelect-Intuitive-Multi-Select-ComboBox

введите здесь описание изображения

  1. или это: http://www.sencha.com/forum/showthread.php?132328-CLOSED-ComboBox-using-Grid-instead-of-BoundList

-- использовать сетку с checkboxselectmodel в поле со списком

person atian25    schedule 07.07.2011
comment
Я видел этот компонент, и я думаю, что это здорово. Но мне нужен именно комбобокс с флажками. Это требование. Спасибо, в любом случае. - person Andrey Selitsky; 08.07.2011
comment
попробуйте второй способ. или подождите, найдется кто-нибудь, кто перенесет lovcombo на 4.x :) - person atian25; 09.07.2011