面板（Ext.Panel）

面板（Ext.Panel）

文章分类:Web前端

1、主要配置项：
      applyTo：在目标元素之后追加组件。
      renderTo：将目标元素作为新组件的容器。
      frame：是否渲染面板，默认为false。
 
      layout：面板的布局类型。
      layoutConfig：被选布局的配置项。
 
      title：设置面板头部的标题信息。
      header：设置是否创建面板头部，默认为false。
      headerAsText：是否在面板头部显示标题信息，默认为true。
      tools：工具按钮配置对象的数组。
      tools主要配置项：
      id：可选值有toggle、close、minimize、maximize、refresh、plus、minus、help、search、save等。
      qtip：按钮的提示信息。
      handler：单击按钮后触发的函数。
      draggable：是否可以拖曳，默认为false。

 

      collapsible：是否允许面板进行展开和收缩，默认为false。
      titleCollapse：是否允许通过单击面板头部进行展开和收缩操作，默认为false。
      hideCollapseTool：是否隐藏展开和收缩按钮，默认为false。
      collapsed：设置面板在第一次渲染时是否处于收缩状态，默认为false。
      animCollapse：是否在展开和收缩时显示动画效果，默认为true。
 
      autoWidth：是否使用自动宽度，默认为false。
      width：面板宽度，默认为auto。
      autoHeight：是否使用自动高度，默认为false。
      height：面板高度，默认为auto。
      autoScroll：是否自动显示滚动条，默认为false。
      disabled：面板是否失效，默认为false。
 
      floating：面板是否浮动。
      shadow：面板是否有阴影，此配置项只有在floating=true时有效。
      x：浮动时的X坐标。
      y：浮动时的Y坐标。

      draggable：面板是否可拖曳，默认为false。或者自定义DD对象。

Js代码

1. draggable: {   
2.     insertProxy: false,   
3.     onDrag: function(e){   
4.         //代理对象   
5.         var p = this.proxy.getEl();   
6.         this.x = p.getLeft();   
7.         this.y = p.getTop();   
8.            
9.         //阴影对象   
10.         var s = this.panel.getEl().shadow;   
11.         if(s){   
12.             s.realign(this.x, this.y, p.getWidth(), p.getHeight());   
13.         }   
14.     },   
15.     endDrag: function(e){   
16.         this.panel.setPosition(this.x, this.y);   
17.     }   
18. }  

draggable: {
	insertProxy: false,
	onDrag: function(e){
		//代理对象
		var p = this.proxy.getEl();
		this.x = p.getLeft();
		this.y = p.getTop();
		
		//阴影对象
		var s = this.panel.getEl().shadow;
		if(s){
            s.realign(this.x, this.y, p.getWidth(), p.getHeight());
        }
	},
	endDrag: function(e){
        this.panel.setPosition(this.x, this.y);
    }
}

 

      tbar：设置面板的顶端工具栏。
 
      autoLoad：设置面板自动加载的url地址，作为body元素内容。items、html和contentEl的内容将被替代。

            autoLoad:'ajax1.htm'

            autoLoad: {url: 'ajax2.htm', params: 'foo=bar&wtf=1'}
      items：单独一个子组件或组件的数组。
      html：设置面板元素的内容，可以是HTML片段或DomHelper生成的内容。
      contentEl：设置面板的内容元素，可以是页面元素的id或已存在的HTML节点。
      bodyStyle：面板体的自定义样式。
      defaults：应用到面板容器中所有元素的配置对象。
      defaultType：面板中元素的默认类型，默认为panel。
 
      bbar：设置面板的底端工具栏。
 
      buttons：加入到面板底部中按钮配置对象的数组。
      buttonAlign：按钮的对齐方式。有效值包括left、center、right。默认为right。

 

2、范例

Js代码

1. var panel1 = new Ext.Panel({   
2.     renderTo: "div1",   
3.     width: 500,   
4.     height: 200,   
5.     title: "标题信息",   
6.     collapsible: true,   
7.     titleCollapse: true,   
8.     hideCollapseTool: true,   
9.     tbar: [   
10.         {xtype:"button", id: "btnAdd", text:"添加", iconCls:"add"},   
11.         {xtype:"button", text:"删除", iconCls:"delete"},   
12.         {xtype:"button", text:"保存", iconCls:"save"},   
13.         "-",   
14.         {xtype:"button", text:"查找", iconCls:"search"},   
15.         {xtype:"button", text:"返回", iconCls:"back"}   
16.     ],   
17.     html: "面板范例",   
18.     bodyStyle: "padding:3px;",   
19.     bbar: [   
20.         new Ext.Toolbar.Spacer(),   
21.         "<font color=red>温馨提示：</font>"  
22.     ]   
23. });   
24.   
25. function clickPanelButton(event, toolEl, panel){   
26.     alert(panel1.getTool("close"));   
27. }