FilteringSelect中有更多选择

时间:2013-12-12 09:10:54

标签: dojo

如何更改filteringselect中的“more choices”标签。请帮我解决问题。下面是我试过的代码,这是FilteringSelect中使用的普通代码示例我在notepad ++中执行此操作。

<html>
<head>
<link rel="stylesheet" href="dijit/themes/claro/claro.css">
<script>dojoConfig = {parseOnLoad: true}</script>
    <script src='dojo/dojo.js'></script>
    <script>
require([
    "dojo/store/Memory", "dijit/form/FilteringSelect", "dojo/domReady!"
], function(Memory, FilteringSelect){
    var stateStore = new Memory({
        data: [
            {name:"Alabama", id:"AL"},
            {name:"Alaska", id:"AK"},
            {name:"American Samoa", id:"AS"},
            {name:"Arizona", id:"AZ"},
            {name:"Arkansas", id:"AR"},
            {name:"Armed Forces Europe", id:"AE"},
            {name:"Armed Forces Pacific", id:"AP"},
            {name:"Armed Forces the Americas", id:"AA"},
            {name:"Alifornia", id:"AA"},
            {name:"Aolorado", id:"AO"},
            {name:"Aonnecticut", id:"AT"},
            {name:"Aelaware", id:"AE"},
            {name:"Blabama", id:"BL"},
            {name:"Blaska", id:"BK"},
            {name:"Bmerican Samoa", id:"BS"},
            {name:"Brizona", id:"BZ"},
            {name:"Brkansas", id:"BR"},
            {name:"Brmed Forces Europe", id:"BE"},
            {name:"Brmed Forces Pacific", id:"BP"},
            {name:"Brmed Forces the Americas", id:"BA"},
            {name:"Balifornia", id:"BA"},
            {name:"Bolorado", id:"BO"},
            {name:"Bonnecticut", id:"BT"},
            {name:"Belaware", id:"BE"},
            {name:"Dlabama", id:"DL"},
            {name:"Dlaska", id:"DK"},
            {name:"Dmerican Samoa", id:"DS"},
            {name:"Drizona", id:"DZ"},
            {name:"Drkansas", id:"DR"},
            {name:"Drmed Forces Europe", id:"DE"},
            {name:"Drmed Forces Pacific", id:"DP"},
            {name:"Drmed Forces the Americas", id:"DA"},
            {name:"Dalifornia", id:"DA"},
            {name:"Dolorado", id:"DO"},
            {name:"Dnecticut", id:"DT"},
            {name:"Delaware", id:"DE"}
        ]
    });

    var filteringSelect = new FilteringSelect({
        id: "stateSelect",
        name: "state",
        value: "CA",
        store: stateStore,
        forceWidth:true,
        pageSize:10,
        searchAttr: "name"
    }, "stateSelect");
});
    </script>
    <style type="text/css">
    .dijitInputField
    {
        font-size:13;
    }
    .dijitPlaceHolder
    {
        font-size:13;
    }
    .dijitMenuItem
    {
        font-size:0.8em;
    }

</style>
</head>
<body class="claro">
    <input id="stateSelect">
<p>
    <button onclick="alert(dijit.byId('stateSelect').get('value'))">Get value</button>
    <button onclick="alert(dijit.byId('stateSelect').get('displayedValue'))">Get displayed value</button>
</p>
</body>
</html>

1 个答案:

答案 0 :(得分:1)

是的,这是可能的,但这并不容易。 Dojo在其本地化消息中定义了“更多选择”消息,您可以看到here

您无法直接更改它们,但您可以覆盖使用它的方法。这是一个棘手的部分,在阅读代码之后,我注意到使用默认dropDownClass的{​​{1}}属性加载了下拉列表。这个类是消息实际使用的地方(实际上它是一个mixin),所以我们需要子类化这个类并扩展它的行为,例如:

_ComboBoxMenu

正如您在此处所见,我们将var CustomizedMenu = declare([_ComboBoxMenu], { buildRendering: function() { this.inherited(arguments); this.nextButton.innerHTML = "More states"; // New text } }); 的html内容更改为nextButton方法中的其他内容。它位于最初放置的位置,因此我们之后将其替换,这就是我们首先使用buildRendering的原因,因为这意味着首先执行超类函数。

之后我们只需更改select的this.inherited(arguments);,如下所示:

dropDownClass

您可以在this JSFiddle上看到完整的代码示例。