Property Sheet

Справочник по API

• Методы, свойства и события
• Примеры

Обзор

Компонент Property Sheet - это список элементов управления. Компонент наследуется от 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

Значения Property Sheet

Так же, как и для form и HTMLform, вы можете обрабатывать сразу все элементы Property Sheet, задавать и получать их value.

• setValues();
• getValues();
• Обработка HTMLform и Form

$$("sets").setValues({
    width:250,
    height:480,
    url:"http://Webix.com/data",
    type:"json"
});
 
var values = $$("sets").getValues();

Сложное Value

Property Sheet может принимать сложные value в режиме complexData:

webix.ui({
    view:"property",
    id:"sets",
    complexData:true,
    elements:[
        { label:"Width", type:"text", id:"layout.width" },
        { label:"Height", type:"text", id:"layout.height"}
    ]
});
 
$$("sets").setValues({
    layout:{
        width:250,
        height:480
    }
});

Related sample:  Property Sheet: Data with Complex Properties

Значения names (id) элементов, получаются путем сложения значений высшего уровня, через точку.

Редактирование данных в элементах Property Sheet

Каждый элемент содержит в себе встроенный редактор, заданный в свойстве type. Возможные значения совпадают с типами редактора и включают в себя:

• color - редактор для цветов, вызывает colorboard;
  • Related sample:  Property Sheet: Colorpicker
• text - стандартный редактор текстовых значений;
• password - текстовый редактор для паролей;
• select - для выбора из нескольких текстовых значений с помощью HTML-контрола 'select';
• combo - для выбора из нескольких значений с помощью контрола Webix combo с редактируемым инпутом;
• richselect - для выбора из нескольких значений с помощью контрола Webix richselect с нередактируемым инпутом;
• checkbox - для значений с двумя состояниями.

Редакторы предусматривающие выбор значений содержат список возможных опций в своей конфигурации, которые можно задать различными способами:

• DataCollection;
• любой компонент данных;
• URL с путем к файлу с данными;
• массив с объектами формата "id-value" - [{ id:1, value:"one"}, ...];
• массив значений - ["one", "two"];
• ассоциативный массив - { 1: "one", 2: "two"};
• функция / proxy.

{
    view:"property",
    id:"sets",
    elements:[
        { type:"select", options: ["json","xml","csv"]},
        { type:"select", options: [
            {id:1, value:"json"},
            {id:2, value:"xml"},
            {id:3, value:"csv"}
        ]},
        { type:"select", options:"grid_id" },
        { type:"select", options:data_collection }
    ]
}

Независимо от способа задания опций, они будут сохранены в DataCollection и доступны для использования и изменения через объект конфигурации элемента:

$$("sets").config.elements[10].collection.add({ value:"New" });

Настройка коллекции редактора

Вы можете зарегистрировать свой тип редактора для элементов Property Sheet с помощью метода registerType. Для регистрации нового типа, укажите его внешний вид и поведение.

Редактор 'Toggle' для значений с двумя состояниями

$$("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"
});

После чего вы можете использовать созданный тип:

webix.ui({
    view:"property", id:"sets", elements:[
        { label:"Data type", type:"toggle", options:["json","xml"], id:"type"}
    ]
});

Related sample:  Property Sheet: Custom Editors

Настройка редакторов в попапе

Редакторы расположенные в всплывающем окне основаны на Webix popup и могут быть зарегистрированы с помощью пользовательской логики или логики определенной по умолчанию:

Попап по умолчанию

// включает редактор в property sheet
webix.ui({ 
    view:"property", id:"sets", elements:[
        { label:"Color front",  type:"popup", popup:"myColorF", id:"colorF" }, 
        ...
    ]
});
 
// определяет внешний вид
webix.ui({  
    id:"myColorF",
    view:"popup",
    body:{ view:"textarea", width:300, height:100 }
});
 
//  регистрирует новый тип
prop.registerType("popup",{ 
    editor:"popup"
});

Пользовательский попап

// стандартные попап редакторы расширенные новыми функциями
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"]);
 
// зарегистрированный новый тип
prop.registerType("popup-ra",{
    editor:"popup-ra"
});

Related sample:  Property Sheet: Custom Editors

Статьи по теме

• Операции с объектами данных
• Размеры компонентов
• Изменение размеров компонентов
• Изменение свойств компонентов
• Property Sheet CSS

Наверх