Question

我正在使用复选框和条件条目构建一个漂亮的组合框。一切正常，除了我无法弄清楚如何实现的两个功能。

1）我想在组合框内移动标签，使其向右移动值，并以浅灰色显示。

2）我希望该值忽略选中的某些条目（组头）。这些条目仅用于功能 - 选择/取消选择其他条目组。

整个项目都在zip文件中。您不需要服务器，它是一个客户端基础应用程序。只需在浏览器中下载存档，解压缩并启动app.html。

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

这是我想要实现的快照。

enter image description here

Answer 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 config选项轻松添加标签。但这只会添加你需要的文字，没有任何风格（灰色等）。组合使用文本输入，不接受html标记。如果您不需要用户键入文本，则可能需要更改组合基本行为并使用其他元素而不是文本输入。

组合框内的标签和条件多选

1 个答案: