The mechanism linking the component

Webix JS
1

Hi all !

I want to build a webapp. I’m defined two widget :

MapUI:

webix.protoUI({
   name: 'gmap',
   $init: function(){
        this.onSelectFeature = webix.bind(function (obj) {
            this.callEvent("MapFeatureSelected", [obj]);
        }, this);
        this.onClickMap = webix.bind(function (obj) {
            this.callEvent("MapClick", [obj]);
        }, this);

        this.$ready.push(this._initMap); 
   },
   _initMap: function(){
        /*.....my code: define map,controlInfo,etc.......*/
        controlInfo.events.register('featureinfo', this, this.onSelectFeature);
        controlInfo.events.register('click', this, this.onClickMap);
   }

},webix.ui.view,webix.EventSystem);

and DatatableUI:

webix.protoUI({
   name: 'gmap',
   $init: function(){
        this.$ready.push(this._initGrid); 
   },
   _initGrid: function(){
        /*.....my code: define grid,etc.......*/
   }

},webix.ui.datatable,webix.EventSystem);

I’m created a layout and add two widget to it.

I want : while the grid call an event then map focus record selected.

How do i link two widget without using id ( can’t use $$(’…’) ) ?

Can you help me, @maksim ?

Sorry for my litte Englisnh…

2

You can use global event hub

in _initGrid of a datatable widget

this.attachEvent("onAfterSelect", function(id){
   webix.callEvent("customMapRecord", this.getItem(id));
})

in _initMap of a map

webix.attachEvent("customMapRecord", function(item){
   //item was selected in the datatable, adjust map as needed
})
3

Thank @maksim