How to run standalone
npm install
npm run server
After that, open http://localhost:8080 in the browser.
How to run with Apache
npm install
npm run watch
How to build codebase
npm install
npm run codebase
Note that latest versions of node.js and npm should be installed.
You need to explicitely set the type of a Webix widget during initialization as webix.ui.{widget}:
var layout = <webix.ui.layout> webix.ui({
rows:[ toolbar, datatable, pager]
});And for using its methods and events after initialization:
var grid:webix.ui.datatable = layout.getChildViews()[1];
grid.add({ title:"New film"}, 0);
//or
var grid = (<webix.ui.datatable>layout.getChildViews()[1]);
grid.add({ title:"New film"}, 0);Or, when accessing the widget by its id:
(<webix.ui.datatable>webix.$$("mygrid")).add({ title:"New film"}, 0);
You also need to set a widget type during attaching handler functions to a widget's events:
var grid:webix.ui.datatable = layout.getChildViews()[1];
grid.attachEvent("onAfterSelect", function(){...});You can provide the correct types for widgets' properties with the related webix.ui.config{Widget} types:
var datatable:webix.ui.datatableConfig = {
view:"datatable",
editable:true,
editaction:"dblclick",
autoConfig:true,
url:"..",
pager:"pagerA",
scrollX:"false"
};
var pager:webix.ui.pagerConfig = {
view:"pager",
id:"pagerA",
group:10,
size:30
};
var layout= <webix.ui.layout> webix.ui({
rows:[ datatable, pager]
}); Adding a custom property to configuration:
interface iconcheckConfig extends webix.ui.checkboxConfig{
icon?:string;
}Adding or overriding methods and properties in the prototype:
interface IconCheckApi{
name:string;
$init(config:iconcheckConfig):void;
getIconLabel(icon:string, label:string):string;
}
interface IconCheckView extends webix.ui.checkbox, IconCheckApi {}Creating a new proto UI:
const api:IconCheck = {
name:"iconcheck",
$init:function(config){
config.label = (<IconCheckView>this).getIconLabel(config.icon, config.label);
config.labelWidth = 100;
},
getIconLabel:function(icon, label){
return "<span class='webix_icon fa-"+icon+"'></span>"+label;
}
<
5E6B
span class="pl-kos">};
webix.protoUI(api, webix.ui.checkbox);Using the custom widget:
var iconcheckbox = <IconCheckView> webix.ui({
view:"iconcheck",
icon:"cog",
label:"Settings"
});