Question

我从来没有像我所知道的那样(我大多数忙于工作)把我拖入与工作相关的工作。

不管怎么说,短的问题是我有礼。 ComboBox, 其中某些数值在你下台时需要一个小的元子(即特殊变量)。我不敢肯定。表格。 ComboBox如果有可能的话。

Am I even using the right control? (For the record I am generating my pages with Template::Toolkit and my app is in dojo s framework).

我需要保持ComboBox的功能,即如果还没有价值,就能够增加价值。即使我能够使用一行,如果选定某种价值将会奏效的话,强调该行的某些方式也会被罚款或改变箱子的颜色。

Any clues would be appreciated. Janie

Answer 1

考虑使用dijit.form.DropDownButton。该链接载有如何在价值观中添加微调剂的守则。

Notice that the DropDownButton uses dijit.MenuItem s as elements, as such your goal is to set the icons you want on these menu items. Dojo has several icon classes ready for use, but if you want to use your own custom icons, take a look at this.

Answer 2

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<head>
    <style type="text/css">
        body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"
    djConfig="parseOnLoad: true">
    </script>
    <script>
        dojo.require("dojo.data.ItemFileReadStore");
        dojo.require("dijit.form.ComboBox");

        var storeData = {
            identifier:  abbr ,
            label:  name ,
            items: [{
                abbr:  ec ,
                name:  Ecuador ,
                capital:  Quito ,
        label:"<img width= 16px  height= 16px  src= images/one.jpg />Ecuador"
            },
            {
                abbr:  eg ,
                name:  Egypt ,
                capital:  Cairo ,
        label:"<img width= 16px  height= 16px  src= images/two.jpg />Egypt"
            },
            {
                abbr:  sv ,
                name:  El Salvador ,
                capital:  San Salvador ,
        label:"<img width= 16px  height= 16px  src= images/three.jpg />El Salvador"
            },
            {
                abbr:  gq ,
                name:  Equatorial Guinea ,
                capital:  Malabo ,
        label:"<img width= 16px  height= 16px  src= images/four.jpg />Equatorial Guinea"
            },
            {
                abbr:  er ,
                name:  Eritrea ,
                capital:  Asmara ,
        label:"<img width= 16px  height= 16px  src= images/five.jpg />Eritrea"
            },
            {
                abbr:  ee ,
                name:  Estonia ,
                capital:  Tallinn ,
        label:"<img width= 16px  height= 16px  src= images/six.jpg />Estonia"
            },
            {
                abbr:  et ,
                name:  Ethiopia ,
                capital:  Addis Ababa ,
        label:"<img width= 16px  height= 16px  src= images/seven.jpg />Ethiopia"
            }]
        }
    </script>
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css"
    />
</head>


<body class=" claro ">
    <div dojoType="dojo.data.ItemFileReadStore" data="storeData" jsId="countryStore">
    </div>
    <div dojoType="dijit.form.ComboBox" store="countryStore" labelAttr="label" labelType="html">
    </div>
</body>

为了存档的目的,其他人应当有这个问题,只是 cut断了上述问题,以便采取行动。当然,你必须找到自己的形象,但这项工作却不然。 Janie

Answer 3

Set the values of the parameters: searchAttr= name , labelAttr= label , labelType= html .

searchAttr - the value of the parameter that is displayed when it is selected. labelAttr - here place html. The value of this parameter is displayed in the dropdown menu.

e.g.

require(["dojo/store/Memory", "dijit/form/ComboBox", "dojo/domReady!"], function(Memory, ComboBox){
    var iconsStore = new Memory({
        data: [
            {id:  stack-overflow ,  name:  stack-overflow ,     label:  <i class="fa fa-stack-overflow"/> },
            {id:  user ,            name:  user ,               label:  <i class="fa fa-user"/> },
            {id:  group ,           name:  group ,              label:  <i class="fa fa-groupr"/> }
        ]
    });

    var cb_icons = new ComboBox({
        id: "iconSelect",
        name: "isons",
        value: "stack-overflow",
        store: iconsStore,
        searchAttr: "name",
        labelAttr: "label",
        labelType: "html"
    }, "stateSelect").startup();
});

友情链接