select

class webix.ui.select(data)
Arguments:
  • data (object) – A configuration object

Select view.

References

views
text().
components
DataCollection().
helpers
bind(), protoUI(), uid().

External references

Official documentation page.

Code

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
webix.protoUI({
    name:"select",
    defaults:{
        template:function(obj,common) {
            var options = common._check_options(obj.options);
            var id = "x"+webix.uid();
            var html = common._baseInputHTML("select")+"id='"+id+"' style='width:"+common._get_input_width(obj)+"px;'>";

            var optview = webix.$$(options);
            if(optview && optview.data && optview.data.each){
                optview.data.each(function(option){
                    html+="<option"+((option.id == obj.value)?" selected='true'":"")+" value='"+option.id+"'>"+option.value+"</option>";
                });
            }else
                for(var i=0; i<options.length; i++) {
                    html+="<option"+((options[i].id == obj.value)?" selected='true'":"")+" value='"+options[i].id+"'>"+options[i].value+"</option>";
                }
            html += "</select>";
            return common.$renderInput(obj, html, id);
        }
    },
    options_setter:function(value){
        if(value){
            if(typeof value =="string"){
                var collection = new webix.DataCollection({url:value});
                collection.data.attachEvent("onStoreLoad", webix.bind(this.refresh, this));
                return collection;
            }
            else
                return value;
        }
    },
    //get input element
    getInputNode: function() {
        return this._dataobj.getElementsByTagName('select')[0];
    }
}, webix.ui.text);