建议 layout 收缩时, 自动把title显示在 expandPanel 上

[iamjxc]

layout收缩时, 会显示一个 expandPanel, 但是看起来空荡荡的
建议把region的title显示在expandPanel上, 或者再增加一个属性, 如 collapsedTitle , 用于定制 expandPanel 的 title

虽然论坛里有解决方案, 但是这个功能很实用, 建议成为 easyui 未来版本的默认功能

[zh_CN]

layout收缩时, 会显示一个 expandPanel, 但是看起来空荡荡的
建议把region的title显示在expandPanel上, 或者再增加一个属性, 如 collapsedTitle , 用于定制 expandPanel 的 title

虽然论坛里有解决方案, 但是这个功能很实用, 建议成为 easyui 未来版本的默认功能

论坛里的对中文支持不太好，英文标题没问题

Title is showed in expandPanel(stworthy give the solution in this bbs), not better for chinese.

[iamjxc]

我刚做的扩展方案, 仅供参考

    // layout的panel收缩时, 把title赋给expandPanel
    var collapsePanel = $.fn.panel.methods.collapse;
    $.fn.panel.methods.collapse = function(jq, animate){
       return jq.each(function(){
         var layout = $(this).closest(".easyui-layout");
         if (layout.length){
            copyLayoutTitle(layout);
         }
         
         collapsePanel.call($.fn.panel.methods, $(this), animate);
      });
   };

   function copyLayoutTitle(layout){
      var regions = ["east","west","north","south"];
      var regionPanels = ["expandEast","expandWest","expandNorth","expandSouth"];
      
      for(var i=0;i<regions.length;i++){
         copyRegionTitle(layout, regions, regionPanels);
      }
   }
   
   function copyRegionTitle(layout, region, expandPanel){
      var panel = layout.layout('panel', region);
      if (!panel || panel.length == 0) return;
      
      var opt = panel.panel("options");
      opt.onCollapse = function(){
         var p = layout.layout('panel', expandPanel);

         // 分上下/左右2种方案
         var el = p.panel("header");
         var cls = "expandPanel-horz";
         if (region == "west" || region == "east") {
            el = p.panel("body");
            cls = "expandPanel-vert";
         }
         
         // 避免重复添加
         if (el.find(".expandPanel-horz,.expandPanel-vert").length) return;
         
         var html = $('<div class="panel-title '+cls+'" >'+opt.title+'</div>');
         el.append(html);
      };      
   }




.expandPanel-vert{
    line-height: 20px;
    padding: 5px;
    width: 0;
}
.expandPanel-horz{
   position: absolute;
   top: 3px;
   right:30px;
   width: 100%;
   text-align: center;   
}