【连载】研究EasyUI系统— Layout组件

layout看它的名称便知道是一个用于布局的组件。事实上也是如此，layout由五个部分组成，分别位于屏幕的上、下、左、右、中五个位置（在easyui中用东、南、西、北、中来描述）。

layout效果图

　　上图便是layout组件的效果图。layout依赖于panel和resizable两个组件，因此继承了两个组件的属性。layout组件除了中部的区域外，其他四个区域都是可选的，在实际项目中按需增删。另外，这四个区域也是可伸缩的。我们依然通过导航菜单、tab页和数据列表的组合，描述layout组件的用法。
　　先看一下layout组件制成导航菜单的效果图。

layout导航菜单效果图

　　同时附上代码。
　　layoutDemo.php

    
        
        
        
        
        
        
        
        
    
    
    
    
        

        

            

                

                    

                        

                        

                            部门信息
                        
                    
                    

                        

                        

                            人员信息
                        
                    
                
 
            
        
        
        

            

        
    

pageHeader.php

    
        
    
    
        

            Layout组件示例页面
        
    

pageDepartment.php

dep.json

[
    {"dep1": 1,"dep2": "总务部","dep3": "2014-1-1","dep4": "公司总部","dep5": "张三","dep6": "王总"},
    {"dep1": 2,"dep2": "销售部","dep3": "2014-1-5","dep4": "公司总部","dep5": "李四","dep6": "李总"},
    {"dep1": 3,"dep2": "软件事业部","dep3": "2014-3-20","dep4": "公司总部","dep5": "王五","dep6": "王总"},
    {"dep1": 4,"dep2": "硬件事业部","dep3": "2014-5-6","dep4": "公司总部","dep5": "赵六","dep6": "王总"},
    {"dep1": 5,"dep2": "销售一中心","dep3": "2014-2-6","dep4": "销售部","dep5": "小明","dep6": "李四"},
    {"dep1": 6,"dep2": "系统集成与维护中心","dep3": "2014-3-25","dep4": "软件事业部","dep5": "小强","dep6": "王五"}
]

        上述代码简单地展现了layout组件的基本用法。里面涉及到datagrid组件，我们会另起一文讲述。
　　我们可以认为layout组件由框架和面板两部分组成。根据上述代码，便是框架，因为它包含了内部三个面板。面板自然就是包含于中的三个

。

layout组件属性（框架）

属性名称	属性值类型	属性默认值	描述
fit	布尔值	false	如true，组件则填充父容器。

layout组件属性（面板）

属性名称	属性值类型	属性默认值	描述
title	字符串	null	面板标题。
region	字符串		面板位置。共“north”、“south”、“west”、“east”、“center”五种。
border	布尔值	true	是否显示面板边框。
split	布尔值	false	是否显示分隔栏，如有分隔栏，用户可改变面板大小。
iconCls	字符串	null	面板头部的图标样式。
href	字符串	null	指定该属性后，面板会加载该属性所指定的页面。
collapsible	布尔值	true	是否显示可伸缩按钮。
minWidth	数值	10	面板最小宽度。
minHeight	数值	10	面板最小高度。
maxWidth	数值	10000	面板最大宽度。
maxHeight	数值	10000	面板最大高度。

layout组件中有关面板的属性其实都不复杂，也不用太多讲解。
　　region、title、href用法已在代码layoutDemo.php中详细展示。west面板中，collapsible 属性设置为true，便可以见到west面板右上角的可伸缩按钮图标。iconCls属性用法请见panel部分。
　　split效果图如下。

split属性效果图

　　上图中，我们将“北部区域”的面板(region 属性值为“north”)的split属性设为false,意为不显示分隔栏。同时又将“西部区域”的面板(region 属性值为“west”)的split属性设为true，图中可见“西部区域”与“中部区域”之间有一条分隔栏，用户可以拖动上述分隔栏调整“西部区域”面板大小。
　　layout组件方法：

方法名称	参数	描述
resize	param	调整layout组件大小。
panel	region	返回指定的面板对象。
collapse	region	收缩指定的面板。
expand	region	展开指定的面板。
add	options	新增面板。
remove	region	删除指定的面板。

resize方法用于调整layout组件（是容器而不是面板）参数param是一组json，包含宽度和高度。
$("#layout").layout("resize", {width:"80%", height:400});
　　panel、collapse、expand、remove功能比较简单，他的参数是面板区域。除panel外，其他三个方法的参数分别为“north”、“south”、“west”、“east”，panel方法还增加了“center”参数。
$("#layout").layout("remove","north");
　　add方法用法请参见tabs组件一文。https://www.jianshu.com/p/d2b135b77125