extjs的border布局在collapse下显示title

首先 引入js文件

<script type="text/javascript" src="/files/extjs/tdgi.borderLayout.js"></script>

 

在viewport上修改布局为新的布局

 var viewport = new Ext.Viewport({ 
   layout:'tdgi_border', //扩写的布局 在收缩的时候能显示title
   animate:true, 
   items:[form_condition,grid_person] 
 });

 

在formpanel的里面加入红字的代码

 var form_condition = new Ext.form.FormPanel
 ({
  labelAlign: 'right',
  layout:{type:'hbox',align:'stretch',pack:'start'},
  height:150,  
  frame:true, //给form加上蓝色的背景
  region:'south',
  //split : true,  //可以上下拉伸
  collapsible : true,  //隐藏
  collapsed : true , // 收缩
  collapsedTitle: true, // 扩写的  在收缩的时候显示title
  title:'请选择注册人员查询条件',
  listeners   : {'expand':{fn: function(){ this.doLayout() }}}

 .....

})

 

那 到现在 title在收缩的时候就能显示了  不过样子比较丑呢  你可以在tdgi.borderLayout.js中修改

在doCollapsedTitle中修改style就行了

...

else {
     var element = {
      tag : 'div',
      html : ct.title ,
      style : 'float: left;color:#15428B;font:bold 11px tahoma,arial,verdana,sans-serif;'
     }
    
    }

...

 

下面是资料的来源

http://tdg-i.com/30/how-to-get-titles-in-collapsed-panels-for-border-layout

http://tdg-i.com/js/examples/ext/tdgiux/tdgi_border/

扩写的js的下载地址

http://tdg-i.com/js/examples/ext/tdgiux/tdgi_border/tdgi.borderLayout.zip