метка внутри поля со списком и условный множественный выбор

Я создаю красивое поле со списком с флажками и условными записями. Все работает хорошо, за исключением двух функций, которые я не могу понять, как реализовать.

1) Я хотел бы переместить метку внутри поля со списком, чтобы она смещала значения вправо и отображалась в слегка сером цвете.

2) Я хотел бы, чтобы значение игнорировало определенные выбранные записи (заголовки групп). Эти записи предназначены только для функциональности - для выбора/отмены выбора групп других записей.

Весь проект находится в zip-архиве. Вам не нужен сервер, это приложение клиентской базы. Просто скачайте архив, распакуйте и запустите app.html в браузере.

http://filesave.me/file/30586/project-zip.html

И вот снимок того, чего я хотел бы достичь.

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


person Geo    schedule 07.06.2013    source источник


Ответы (1)


Что касается вашей второй проблемы, лучший способ, который я вижу, - это переопределить поле со списком onListSelectionChange для фильтрации значений, которые вам не нужны:

onListSelectionChange: function(list, selectedRecords) {
    //Add the following line
    selectedRecords = Ext.Array.filter(selectedRecords, function(rec){
        return rec.data.parent!=0;
    });
    //Original code unchanged from here
    var me = this,
        isMulti = me.multiSelect,
        hasRecords = selectedRecords.length > 0;
    // Only react to selection if it is not called from setValue, and if our list is
    // expanded (ignores changes to the selection model triggered elsewhere)
    if (!me.ignoreSelection && me.isExpanded) {
        if (!isMulti) {
            Ext.defer(me.collapse, 1, me);
        }
        /*
         * Only set the value here if we're in multi selection mode or we have
         * a selection. Otherwise setValue will be called with an empty value
         * which will cause the change event to fire twice.
         */
        if (isMulti || hasRecords) {
            me.setValue(selectedRecords, false);
        }
        if (hasRecords) {
            me.fireEvent('select', me, selectedRecords);
        }
        me.inputEl.focus();
    }
},            

И измените свой onBoundlistItemClick, чтобы выбирать и отменять выбор только элементов в boundlist, а не setValue комбо:

onBoundlistItemClick: function(dataview, record, item, index, e, eOpts) {
    var chk = item.className.toString().indexOf('x-boundlist-selected') == -1;

    if ( ! record.data.parent) {    
        var d = dataview.dataSource.data.items;
        for (var i in d) {
            var s = d[i].data;
            if (s.parent == record.data.id) {
                if (chk) { // select
                     dataview.getSelectionModel().select(d[i],true);
                } else { // deselect
                     dataview.getSelectionModel().deselect(d[i]);
                }
            }
        }
    }
},

Что касается вашей первой проблемы, легко добавить метку с помощью параметра конфигурации displayTpl. Но это добавит только нужный вам текст без какого-либо стиля (серый цвет и т. д.). Комбинация использует текстовый ввод, который не принимает теги html. Если вам не нужно, чтобы пользователь вводил текст, вы можете изменить базовое поведение комбо и использовать другой элемент вместо ввода текста.

person Amit Aviv    schedule 08.06.2013