ExtJs 4 комбинированный список с флажками - PullRequest
Новая
       44

ExtJs 4 комбинированный список с флажками

8 голосов
/ 06 июля 2011

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

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

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

Ответы [ 2 ]

17 голосов
/ 06 июля 2012

Комбинирование множественного выбора с флажком в 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>';
            }
        }
    });

[ниже изображение этого пользовательского компонента]
enter image description here

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

enter image description here

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

- использовать сетку с флажком selectmodel в поле со списком

...