0

我正在构建一个带有复选框和条件条目的漂亮组合框。一切正常，除了两个我不知道如何实现的功能。

1）我想移动组合框内的标签，使其值向右移动，并显示为略带灰色的颜色。

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

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

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

这是我想要实现的目标的快照。

在此处输入图像描述

4

1 回答 1

2

关于你的第二个问题，我看到的最好的方法是覆盖组合框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 标签的文本输入。如果您不需要用户输入文本，那么您可能需要更改组合基本行为并使用另一个元素而不是文本输入。

于 2013-06-08T00:03:04.993 回答