https://github.com/zwillinge/webix-typescript-demo
Demo app of using Webix with TypeScript
https://github.com/zwillinge/webix-typescript-demo
typescript webix
Last synced: about 1 month ago
JSON representation
Demo app of using Webix with TypeScript
- Host: GitHub
- URL: https://github.com/zwillinge/webix-typescript-demo
- Owner: Zwillinge
- Created: 2017-04-15T15:51:41.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2017-04-17T15:03:52.000Z (about 9 years ago)
- Last Synced: 2025-01-21T20:32:16.736Z (over 1 year ago)
- Topics: typescript, webix
- Language: TypeScript
- Homepage:
- Size: 13.7 KB
- Stars: 0
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Webix + TypeScript Demo Application
=========
### How to start
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.
### Typing within Webix widgets
You need to explicitely set the type of a Webix widget during initialization as **webix.ui.{widget}**:
~~~js
var layout = webix.ui({
rows:[ toolbar, datatable, pager]
});
~~~
And for using its methods and events after initialization:
~~~js
var grid:webix.ui.datatable = layout.getChildViews()[1];
grid.add({ title:"New film"}, 0);
//or
var grid = (layout.getChildViews()[1]);
grid.add({ title:"New film"}, 0);
~~~
Or, when accessing the widget by its id:
~~~
(webix.$$("mygrid")).add({ title:"New film"}, 0);
~~~
You also need to set a widget type during attaching handler functions to a widget's events:
~~~js
var grid:webix.ui.datatable = layout.getChildViews()[1];
grid.attachEvent("onAfterSelect", function(){...});
~~~
### Typing for widgets' configuration
You can provide the correct types for widgets' properties with the related **webix.ui.config{Widget}** types:
~~~js
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({
rows:[ datatable, pager]
});
~~~
### Creating a custom widget with strict typing
Adding a custom property to configuration:
~~~js
interface iconcheckConfig extends webix.ui.checkboxConfig{
icon?:string;
}
~~~
Adding or overriding methods and properties in the prototype:
~~~js
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:
~~~js
const api:IconCheck = {
name:"iconcheck",
$init:function(config){
config.label = (this).getIconLabel(config.icon, config.label);
config.labelWidth = 100;
},
getIconLabel:function(icon, label){
return ""+label;
}
};
webix.protoUI(api, webix.ui.checkbox);
~~~
Using the custom widget:
~~~js
var iconcheckbox = webix.ui({
view:"iconcheck",
icon:"cog",
label:"Settings"
});
~~~