Docking layout

API Doc

You are here : > > > >

Docking Layout

layout:{
    type: 'docking' // or tabs
}

Demo

SAMPLE

CODE

<div id="tab-target1" style="height:470px"></div>

<script type="text/javascript">
new ludo.FramedView({
        title:'Docking layout',
        id:'dockingWindow',
        renderTo:'#tab-target1',
        layout:{
            width:'matchParent', height:440,
            type:'linear',
            orientation:'horizontal'
        },
        children:[ // Children for the accordion listed below
            {
                id:'dockingLayoutView',
                layout:{
                    type:'docking',
                    width:200,
                    resizable:true,
                    tabs:'left'
                },
                children:[
                    {
                        id:'view1',
                        title: 'Project',// Title for the accordion
                        html:'<ul><li>Content</li><li>Content</li><li>Content</li><li>Content</li></ul>'
                    },
                    {
                        id:'view2',
                        title: 'Structure', // Title for the accordion
                        html:'Second child view'
                    }
                ]
            },
            {
                html:'<h1>Main View</h1>',
                css:{
                    padding:5,
                    'border-left': '1px solid ' + ludo.$C('border')
                },
                layout:{
                    weight:1
                }
            }
        ]
    });
</script>

The docking layout extends the Tab layout.

All the configuration properties are the same, so the description here will be short.

The only difference between the ludo.layout.Docking layout and the ludo.layout.Tab is that you can choose not to show any child views.

When no child views are visible, the size of the docking view will collapse to the size of the tab strip.

Collapse Docking View

The view can be collapsed by clicking on the tab for the visible child view.

It can also be hidden during runtime with code:

ludo.$('idOfChild').hide();

Initially displayed child view

By default, the docking layout will be shown in collapsed state. To initially display a child view, set layout.visible to true for that particular child view.

children:[
    {
        title:'Tab title',
        layout:{ visible:true }
    }
]

Back to Tabs layout

Generated 2017-01-03 19:10:30