Extjs中panel的 collapseMode 属性的应用，修改折叠箭头样式

panel中属性collapseMode可以实现面板的折叠，不过属性自带的折叠箭头不太容易辨识，通过修改实现如下展现样式

 

 

具体代码实心如下：

Ext.onReady(function(){
 
 var mainPanel=Ext.create('Ext.panel.Panel',{
  title:'主信息',
//  collapsible:false,
//  layout:'border',
  height:300,
  region:'center'
 });
 var linePanel=Ext.create('Ext.panel.Panel',{
  title:'明细信息',
  layout:'fit',
  border : true,
  autoScroll :true, //形成卷轴
  
  collapsible:true,
  collapseMode:'mini',
  margins:{left: 0, top: 10, right: 0, bottom: 20},
  split:true,
  frame:true,
  height:250,
  region:'south'
 });
 Ext.create('Ext.container.Viewport',{
  title:'TEST',
  layout:'border',
  margins:{left: 0, top: 10, right: 0, bottom: 20},
  items:[mainPanel,linePanel],
  renderTo:Ext.getBody()
  
 });
})

 

  collapseMode : 'mini'  对应的文件在 ext-all.css 中，如果想修改浮动按钮的显示效果，可以修改css文件中对应的图片路径

 实例：
.x-layout-split-north .x-layout-mini{left:48%;height:20px;width:35px;background-image:url(../images/default/layout/up-button.png);} /*mini-top.gif height:5px; width:35px;  */
.x-layout-split-south .x-layout-mini{left:48%;height:20px;width:35px;background-image:url(../images/default/layout/down-button.png);}  /*mini-bottom.gif height:5px; width:35px;  */

css文件中默认对应的浮动图片为 mini-top.gif 和 mini-bottom.gif