Webix Internals

Data Loading

url:/xyz"

list.url_setter
=>
list.load
=>
webix.ajax()
=>
callback
=>
list.parse(data)
=>
store : onStoreUpdated
=>
list.render

Data Loading

url:/xyz"

list.url_setter
=>
list.load             | url.$proxy
=>
webix.ajax()          | onBeforeAjax
=>
callback              | list.$onLoad
=>
list.parse(data)      | list.config.datatype
                      | list.config.scheme.$init
=>
store : onStoreUpdated
=>
list.render           | list.template

Data Edit

table.editStop
=>
onBeforeEditStop
=>
store.updateItem
=>
onStoreUpdated
    - table.validate
    - table.render
    - dp.send
        - dp.validate
onDataUpdate
    - undo tracking
=>
onAfterEditStop

Data Edit

table.editStop
=>
onBeforeEditStop
=>
store.updateItem        | table.config.scheme.$update
=>
onStoreUpdated
    - table.validate    | will not block saving
                        | will not prevent data change
    - table.render
    - dp.send           | if table.config.save is defined  
        - dp.validate   | will block saving
onDataUpdate
    - undo tracking     |
=>
onAfterEditStop

Window resize

webix.ui.resize
=>
topui.resize
=>
topui.$getSizes
   - child.$getSizes
     - ...
=>
topui.$setSizes
   - child.$setSizes
     - ...



webix.attachEvent("onResize", handler);

Window resize

webix.ui.resize
=>
topui.resize
=>
topui.$getSizes        | 
        [minWidth, maxWidth, minHeight, maxHeight, gravity ]
   - child.$getSizes
     - ...
=>
topui.$setSizes        | (x, y)
   - child.$setSizes
     - ...



webix.attachEvent("onResize", handler);

webix.protoUI

webix.protoUI(a, b, c, d)
= 
res = Object.assign({}, d, c, b, a)
+
res.defaults = Object.assign(d.default, c.defaults, ...)
+
constructor = function(){
    d.$init()
    c.$init()
    b.$init()
    a.$init()
}
constructor.prototype = res
+
webix.ui[a.name] = constructor

Custom drag-n-drop

sources/drag.js - webix.DragControl (addDrag, addDrop)
sources/dnd.js - webix.DragItem

$dragCreate | $drag ( *$dragHTML )

$dragPos
$dragIn
$dragOut
*$dragMark

$drop => target.move
$dragDestroy

webix.DragControl.getContext 
{
  from, to, source, target,
  x_offset, y_offset,
}

JetView show

- get current url
- modify url
  - normalize url pattern ( ../. etc. ) 
  - locate and replace segments or parameters
  - check is url accessible
    - app:guard
  - set new url
- update related segment of ui
  - locate the root of modified subtree
  - run _urlChange for root
    - app:urlchange
    - resolve url segment name to view class  
        sub.config()
    - render ui        | for existing segments
                       | jump to urlChange
      - app:render
      - old.destroy
      - sub.init()
      - sub.urlChange() -> trigger the next level
        - app:urlchange
      - sub.ready()
    

Extra information

Google

Inform about missed topics in docs or on forum