FlexLayout

class webix.FlexLayout()

Flexlayout mixin

External references

Official documentation page.

Code

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
webix.FlexLayout = {
    $init:function(){
        this.$view.className += " webix_flexlayout";
    },
    _fix_vertical_layout:function(){

    },
    _beforeResetBorders:function(){

    },
    _afterResetBorders:function(){

    },
    $getSize:function(dx, dy){
        webix.debug_size_box_start(this, true);

        var w=0, h=0, g = this._settings.gravity;
        this._sizes = [];

        for (var i=0; i<this._cells.length; i++){
            var size = this._cells[i].$getSize(0,0);
            this._sizes.push(size);

            w = Math.max(w, size[0]);
            h = Math.max(h, size[2]);
        }

        w += (this._paddingX||0)*2;
        h += (this._paddingY||0)*2;

        if (this._settings.width)
            w = Math.max(w, this._settings.width);
        if (this._settings.height)
            h = Math.max(h, this._settings.height);

        var self_size = [w, 100000, h, 100000, g];
        webix.debug_size_box_end(this, self_size);
        return self_size;
    },
    _set_child_size:function(x,y){
        var st = this.$view.style;
        var margin = Math.round(this._margin/2);
        st.paddingTop = st.paddingBottom = this._paddingY-margin + "px";
        st.paddingLeft = st.paddingRight = this._paddingX-margin + "px";

        for (var i=0; i<this._cells.length; i++){
            if (this._cells[i]._settings.hidden) continue;
            var view = this._cells[i].$view;
            var size = this._sizes[i];
            var config = this._cells[i]._settings;

            if (view){
                view.style.minWidth = size[0]+"px";
                if (size[1] < 100000 && size[1] != size[0])
                    view.style.maxWidth = size[1]+"px";

                view.style.flexBasis = config.flexBasis || (size[0])+"px";
                view.style.flexGrow = config.flexGrow || ((size[1] != size[0]) ? size[4] : 0);
                view.style.height = (size[3] != size[2]) ? "auto" : (size[2] + "px");

                view.style.minHeight = size[2]+"px";
                if (size[3] < 100000 && size[3] != size[2])
                    view.style.maxHeight = size[3]+"px";

                view.style.margin = margin + "px";
            }
        }

        var whs = [];
        for (var i=0; i<this._cells.length; i++){
            if (this._cells[i]._settings.hidden) continue;
            var view = this._cells[i].$view;
            whs[i] = [view.offsetWidth, view.offsetHeight];
        }

        for (var i=0; i<this._cells.length; i++){
            if (this._cells[i]._settings.hidden) continue;
            var cell = this._cells[i];
            var view = cell.$view;
            if (view){
                cell._settings.flex = true;
                var size = this._sizes[i];
                var h = size[2] == size[3] ? size[2] : whs[i][1];
                cell.$setSize(whs[i][0], h);
                cell._settings.flex = false;
            }
        }

        this.$height = this._content_height = this.$view.scrollHeight;
        this.$view.style.height = this._content_height+"px";
    }
};
webix.protoUI({
    $init:function(){
        webix.extend(this, webix.FlexLayout, true);
    },
    name:"flexlayout"
}, webix.ui.layout);