Property sheet is a list of properties. Ui-related property sheet inherits from view.
{ view:"property", id:"sets", width:300,
elements:[
{ label:"Layout", type:"label"},
{ label:"Data url", type:"text", id:"url"},
{ label:"Data type", type:"select", options:["json","xml","csv"], id:"type"},
{ label:"Use JSONP", type:"checkbox", id:"jsonp"}
]
};
Related sample: Property Sheet: Basic Initialization
The elements with label gets header CSS. If there's no type the element is non-styled and non-editable.
The elements of a property sheet can be treated together, you can get and set their values just like you do it with form and HTMLform.
$$("sets").setValues({
width:250,
height:480,
url:"http://Webix.com/data",
type:"json"
});
var values = $$("sets").getValues();
Each element features a built-in editor specified by type property. Possible values coincide with editor types and include:
Select editors features options in their configuration that can be defined in the following ways:
elements:[
{ type:"select", options: ["json","xml","csv"]},
{ type:"select", options: [
{id:1, value:"json"},
{id:2, value:"xml"},
{id:3, value:"csv"}
]}
]
Besides, other editors types can be registered for the elements with the help of the registerType() method. During registering the new element type, you should specify its appearance and behavior.
'Toggle' editor for two-state values
$$("sets").registerType("toggle",{
template:function(value, config){
return "<input type='button' class='webix_toggle_button_custom' value='"+
value+"' style='margin:0px; width:95%; height:20px; font-size:12px; '>";
},
click:{
webix_toggle_button_custom:function(e, id){
var data = this.getItem(id);
if (data.options[0] == data.value)
data.value = data.options[1];
else
data.value = data.options[0];
this.editStop();
this.refresh(id);
this.callEvent("onCheck",[id, data.value]);
}
},
editor:"inline-text"
});
And then use it:
webix.ui({
view:"property", id:"sets", elements:[
{ label:"Data type", type:"toggle", options:["json","xml"], id:"type"}
]
});
Related sample: Property Sheet: Custom Editors
Popup editors are based on Webix popup window and can be registered with either default or custom logic:
Default Popup
//including the editor into the property sheet
webix.ui({
view:"property", id:"sets", elements:[
{ label:"Color front", type:"popup", popup:"myColorF", id:"colorF" },
...
]
});
//defining its appearance
webix.ui({
id:"myColorF",
view:"popup",
body:{ view:"textarea", width:300, height:100 }
});
//registering the new type
prop.registerType("popup",{
editor:"popup"
});
Custom Popup
// standard popup editors is extended with new functions
webix.editors["popup-ra"] = webix.extend({
focus:function(){ },
getValue:function(node){
return this.getInputNode(node).data.edit;
},
setValue:function(node, value){
this.getPopup(node).show(node);
this.getInputNode(node).data.edit = value;
this.getInputNode(node).refresh();
}
}, webix.editors["popup"]);
//new type is registered
prop.registerType("popup-ra",{
editor:"popup-ra"
});
Related sample: Property Sheet: Custom Editors