Easyui组件依赖关系图

搞了两年多后端，一直在使用easyui，知其然不知其所以然，看到一些比较对自己比较有用的文章就转载一下，方便自己以后忘记的时候回头看一下：

参考博客地址：http://www.easyui.info/archives/765.html 

一个好的框架，其内部组件肯定都是有继承关系的，这样才能最大限度地重复利用代码，easyui这方面做得也不错。所谓“继承”大家一定先要理解概念，easyui里面的继承并不是真的继承，只是一种简单的依赖关系。

这种依赖关系主要体现在几方面：

“依赖者”会继承“被依赖者”的属性，初始化自己的options 
“依赖者”会在自身内部初始化的时候，同时会初始化“被依赖者” 
“依赖者”会通过调用“被依赖者”对象的方法来实现自己和“被依赖者”同名的方法 
以下图片就为easyui的依赖关系图：

举个例子：layout组件依赖于panel组件，那么layout组件的属性，拥有自己独特的属性，同时还拥有panel的属性，所以在初始化layout的东、南、西、北几个region的时候，可以给pannel的属性赋值，我当时在官方文档找layout的tools属性找不到，才发现在pannel里面。如下例子：

添加西侧区域面板和工具菜单按钮

1. $('#cc').layout('add',{   
2.     region: 'west',   
3.     width: 180,   
4.     title: 'West Title',   
5.     split: true,   
6.     tools: [{   
7.         iconCls:'icon-add',   
8.         handler:function(){alert('add')}   
9.     },{   
10.         iconCls:'icon-remove',   
11.         handler:function(){alert('remove')}   
12.     }]   
13. }); 

在layout的区域属性（如下）是没有tools的，在panel中就有。

区域面板属性定义与panel组件类似，下面的是公共的和新增的属性： 

属性名	属性值类型	描述	默认值
title	string	布局面板标题文本。	null
region	string	定义布局面板位置，可用的值有：north, south, east, west, center。
border	boolean	为true时显示布局面板边框。	true
split	boolean	为true时用户可以通过分割栏改变面板大小。	false
iconCls	string	一个包含图标的CSS类ID，该图标将会显示到面板标题上。	null
href	string	用于读取远程站点数据的URL链接	null
collapsible	boolean	定义是否显示折叠按钮。（该属性自1.3.3版开始可用）	true
minWidth	number	最小面板宽度。（该属性自1.3.3版开始可用）	10
minHeight	number	最小面板高度。（该属性自1.3.3版开始可用）	10
maxWidth	number	最大面板宽度。（该属性自1.3.3版开始可用）	10000
maxHeight	number	最大面板高度。（该属性自1.3.3版开始可用）	10000
expandMode	string	在点击折叠面板时候的扩展模式。可用值有：“float”、“dock”和null float：区域面板将展开并浮动在顶部，在鼠标焦点离开面板时会自动隐藏。 dock：区域面板将展开并钉在面板上，在鼠标焦点离开面板时不会自动隐藏。 null：什么也不会发生。 （该属性自1.4.4版开始可用）	float
collapsedSize	number	折叠后的面板大小。（该属性自1.4.4版开始可用）	28
hideExpandTool	boolean	为true时隐藏折叠面板上的扩展面板工具。（该属性自1.4.4版开始可用）	false
hideCollapsedContent	boolean	为true时隐藏折叠面板上的标题栏。（该属性自1.4.4版开始可用）	true
collapsedContent	string,function(title)	定义在折叠面板上要显示标题内容。 1. 标题字符串； 2. 通过函数返回标题内容。 （该方法自1.4.4版开始可用） 代码示例： collapsedContent: function(title){ var region = $(this).panel('options').region; if (region == 'north' || region == 'south'){ return title; } else { return '<div class="mytitle">'+title+'</div>'; } }

附上jquery easyui1.4.5中文版API的下载地址：https://download.csdn.net/download/richie696/9484935（这个是我在csdn找的，要积分，本来想免积分共享一份的，上传的时候提示已经存在，新手，不知道怎么操作，见谅！）