Question

我正在为自定义FilteringSelect小部件商店中的项添加label属性，以便它们显示图标。

var data = this.store.data;
for ( var i = 0; i < data.length; i++ ) {
    data[i].label = data[i].needsIcon ? "<div class='labelIcon'></div> " : "";
    data[i].label += data[i].value;
}

这对于在下拉列表中的项目前显示图标都很有用，但是当选择项目时，标签现在是对象的一部分。有没有办法修改自定义窗口小部件，以便它返回没有＆＃34;标签的项目＆＃34;属性：

var myItem = customSelectWidget.item; // How to return the item without "label"???

Answer 1

也许你可以使用这样的dom操作:(见this fiddle）

select = new FilteringSelect({
    id : "myContainer",
    store : store,
    searchAttr : "label"
}, "mySelect");

select.on("search", function(){
    var menuItems = query(".dijitMenuItem", select.dropDown.domNode);
    array.forEach(menuItems, function(menuItem){
            switch(menuItem.innerText){
            case  "Apples" :
                domClass.add(menuItem, "apple");
                break;
            case "Pears" :
                domClass.add(menuItem, "pear");
                break;
            }
    });
});

然后用css类定制你的menuItem节点，如：

.claro div.dijitMenuItem.apple, .claro div.dijitMenuItem.pear {
    padding-left : 18px;
}

.claro div.dijitMenuItem.apple {
    background : url(http://icons.iconarchive.com/icons/mad-science/yellow-submarine/16/APPLE-icon.png) left no-repeat;
}
.claro div.dijitMenuItem.pear{
    background : url(http://icons.iconarchive.com/icons/iconicon/veggies/16/pear-icon.png) left no-repeat; 
}

如何使用自定义FilteringSelect返回修改的项目

1 个答案: