ExtJs中panel学习

Ext.panel.Panel扩展自Ext.container.Container，可以应用布局，也可以作为各种组件的容器。标准面板组件主要包括：面板头部（header）、顶部工具栏（top toolbars）、面板体（body）、底部工具栏（bottom toolbars）、面板底部（footer）。

面板主要配置参数及属性：

//配置参数(只列举部分常用参数)
1.autoLoad：有效的url字符串，把那个url中的body中的数据加载显示，但是可能没有样式和js控制，只是html数据
2.autoScroll:设为true则内容溢出的时候产生滚动条，默认为false
3.autoShow:设为true显示设为"x-hidden"的元素，很有必要，默认为false

4.bbar:底部条，显示在主体内，//代码：bbar:[{text:'底部工具栏bottomToolbar'}],
5.tbar:顶部条，显示在主体内，//代码:tbar:[{text:'顶部工具栏topToolbar'}],
6.buttons:按钮集合，自动添加到footer中（footer参数，显示在主体外）//代码：buttons:[{text:"按钮位于footer"}]
7.buttonAlign:footer中按钮的位置，枚举值为："left","right","center",默认为right

8.collapsible：设为true，显示右上角的收缩按钮，默认为false
9.draggable:true则可拖动，但需要你提供操作过程，默认为false

10.html:主体的内容
11.id：id值，通过id可以找到这个组件，建议一般加上这个id值
12.width：宽度
13.height：高度
13.title:标题

14.titleCollapse：设为true，则点击标题栏的任何地方都能收缩，默认为false.

15.applyTo：（id）呈现在哪个html元素里面
16.contentEl：（id）呈现哪个html元素里面，把el内的内容呈现
17.renderTo：（id）呈现在哪个html元素里面

实例：

 

代码如下：

            Ext.onReady(function(){
                   var panelWin=new Ext.panel.Panel({
                        title:'test',
                        tbar:['顶端'],
                        renderTo:Ext.getBody(),
                        layout:{type:'border',
                        align:'middle'},
                        height:300,
                        width:300, 
                        html:'这里是测试区域',
                        tools:[{id:'close'},{id:'maximize'}],
                        bbar:[{
                             xtype:'button',
                             text:'按钮1'
                            },'-',{
                               xtype:'button',
                               text:'按钮2'
                      }]
 
           });

 

实现面板可以拖动，如果只是修改属性draggable:true，那么不能保存拖动后的结果，需要修改该属性，修改后可拖动面板代码如下：

           Ext.onReady(function(){
                var panelWin=new Ext.panel.Panel({
                      title:'test',
                      tbar:['顶端'],
                      renderTo:Ext.getBody(),
                      height:300,
                      width:300, 
                      draggable: {
                           insertProxy: false,//拖动时不虚线显示原始位置

                           onDrag : function(e){
                                   var pel = this.proxy.getEl();
                                   this.x = pel.getLeft(true);
                                    this.y = pel.getTop(true);//获取拖动时panel的坐标
              
                                     var s = this.panel.getEl().shadow;
                                     if (s) {
                                           s.realign(this.x, this.y, pel.getWidth(), pel.getHeight());
                                    }

                              },

                          endDrag : function(e){
                                  this.panel.setPosition(this.x, this.y);//移动到最终位置
                          }
                   } ,
                  html:'这里是测试区域',
                  tools:[{id:'close'},{id:'maximize'}],
                  bbar:[{
                       xtype:'button',
                       text:'按钮1'
                   },'-',{
                       xtype:'button',
                       text:'按钮2'
                 }]
 
           });