Absolute Layout + Dynamically Adding Items

Webix JS
1

I am basically trying to combine: http://forum.webix.com/discussion/3843/custom-compound-components/p1

with: http://forum.webix.com/discussion/3949/layout-absolute-x-y-positioning#latest

My code is below. When the New button is clicked, I am trying to dynamically attach a new widget to the absolute layout when the button is clicked. A new Widget will create a new SelectGroup view, and that SelectGroup will create a SelectRow, all in a nested fashion. However, all I am getting is a gray rectangle, and there are no errors in the console.

webix.protoUI({
    name:'selectRow',
    $init:function(config) {
        console.log('selectRow.init');
        config.cols = [
            { view:'select', options:[{id:0,value:''},{id:1,value:'1'},{id:2,value:'2'},{id:3,value:'3'}], click:function(value) {console.log('left = ' + value)}},
            { view:'select', options:[{id:0,value:''},{id:1,value:'>'},{id:2,value:'>='},{id:3,value:'='},{id:4,value:'<'},{id:5,value:'<='},{id:6,value:'!='}], click:function(value) {console.log('center = ' + value)}},
            { view:'select', options:[{id:0,value:''},{id:1,value:'1'},{id:2,value:'2'},{id:3,value:'3'}], click:function(value) {console.log('right = ' + value)}},
            { view:'select', options:[{id:0,value:''},{id:1,value:'A'},{id:2,value:'B'}], click:function(value) {console.log('junk = ' + value)}},
            { view:'button', type:'iconButton', icon:'fa-minus-circle', click:function(){console.log('click!')}}
        ];
    }
}, webix.ui.layout);

webix.protoUI({
    name:'selectGroup',
    $init:function(config) {
        this.$ready.push(this.addRow());
    },
    addRow:function() {
        console.log('selectGroup.addRow');
        this.config.cols.push({ view:'selectRow' });
    }
}, webix.ui.layout);

webix.protoUI({
    name:'widget',
    $init:function(config) {
        this.config.rows = [];
    },
    addGroup:function() {
        console.log('container.addGroup');
        this.config.cols.push({ view:'selectGroup' });
    }
}, webix.ui.view);


webix.protoUI({
    name:'abs',
    $init:function(config){
        this.$ready.push(this.render);
        this.$view.style.position = 'relative';
    },
    addWidget:function() {
        console.log('abs.addWidget');
        this.config.cells.push({ view:'widget', x: 50, y: 50, w: 400, h: 300 });
        this.render();
    },
    render:function() {
        for (var i = 0; i < this.config.cells.length; i++) {
            var cell = this.config.cells[i];
            var d = webix.html.create('DIV');
            d.style.position = 'absolute';
            d.style.left = (cell.x || 0) +'px';
            d.style.top = (cell.y || 0) +'px';
            d.style.width = (cell.w || 0) +'px';
            d.style.height = (cell.h || 0) +'px';

            this.$view.appendChild(d);
            webix.ui(cell, d);
        }
    }
}, webix.ui.view);

        webix.ui({
            rows: [
                {
                    view: 'toolbar',
                    cols:[
                        {
                            view:'button',
                            value:'New',
                            width:100,
                            align:'left',
                            click: function() {
                                $$('canvas').addWidget();
                            }
                        }
                    ]
                },
                {
                    id:'canvas',
                    view: 'abs',
                    cells:[]
                }
            ]
        });
2

A new Widget will create a new SelectGroup view, and that SelectGroup will create a SelectRow

This logic is actually missed in your code. After calling addWidget you are creating a new “widget” view but no any further UI creation occurs in the code.

Check Code Snippet

3

This is a step in the right direction. Still needs a few more tweaks though:

The Widget is the visual container, so it’s the object that needs to be 100% width and 100% height of the parent DIV.

The SelectGroups are children of the Widget, so they would have 100% width or their parent (the Widget).

The SelectRows are children of a SelectGroup, so they would have 100% width of their parent (the SelectGroup).

Also, I was trying to set a style class for each of these custom components and nothing seems to work. I wanted to set the background color of the Widget.

Thanks

4

I guess what I am trying to do is add the Widget to the DIV. That DIV just supports the absolute positioning of the Webix components.

5

As far as I can see sizing occurs as you wish. The div has fixed width and height ( from configuration ) and inner components do respect it. The SelectGroup has the same width as was defined for the DIV

6

http://webix.com/snippet/fae9c17e