Ext panel的用法

首先是一个简单的demo

 new Ext.Panel({
 	title:'panel学习',
 	width:300,
 	height:200,
 	html:"<p>panel的内容</p>",
	renderTo:Ext.getBody() 	
 });

 

效果如图:

下面是一些常用的参数：

//配置参数(只列举部分常用参数)
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元素里面

三个参数的区别如下：

contentEl - This config option is used to take existing content and place it in the body of a new panel. It is not going to be the actual panel itself. (It will actually copy the innerHTML of the el and use it for the body). You should add either the x-hidden or the x-hide-display CSS class to prevent a brief flicker of the content before it is rendered to the panel. applyTo - This config option allows you to use pre-defined markup to create an entire Panel. By entire, I mean you can include the header, tbar, body, footer, etc. These elements must be in the correct order/hierarchy. Any components which are not found and need to be created will be autogenerated. renderTo - This config option allows you to render a Panel as its created. This would be the same as saying myPanel.render(ELEMENT_TO_RENDER_TO);

也可以参考一下这个列子： 

http://yahaitt.iteye.com/blog/249444

http://zms198983.iteye.com/blog/1463788

接下里是几个复杂的例子：

 /**
  * 可拖动的panel
  */
 var panelDragable=new Ext.Panel({
    title: 'Drag me',
    x: 100,
    y: 100,
    renderTo: Ext.getBody(),
    floating: true,
    frame: true,
    width: 400,
    height: 200,
    draggable: {
        insertProxy: false,
        onDrag : function(e){
            var pel = this.proxy.getEl();
            this.x = pel.getLeft(true);
            this.y = pel.getTop(true);
            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);
        }
    }
});

/**
 * 带tbar和bbar的panel
 */
var panelBar=new Ext.Panel({
   		id:"panel1",
   		x:500,
   		y:600,
        title:"标题",
        collapsible:true,
        renderTo:Ext.getBody(),
        closable:true,
        width:400,
        height:300,
        tbar : [{
					text : "按钮1",
					handler : function() {
						Ext.MessageBox.alert("我是按钮1",
								"我是通过按钮1激发出来的弹出框！")
					}
				}, {
					text : "按钮2"
				}],
        bbar:[{text:"按钮1"},{text:"按钮2"}],  //底部工具栏
        html:"内容",
        buttons:[{text:"按钮1"},{text:"按钮2"}] //footer部工具栏
});

/**
 * 带工具的panel
 */
 var panelTool=new Ext.Panel({
 	title:'panel学习',
 	width:300,
 	height:200,
 	x:900,
 	y:800,
 	html:"<p>panel的内容</p>",
	renderTo:Ext.getBody(),
	tools : [{
		id : "save"
	}, {
		id : "help"
	}, {
		id : "up"
	}, {
		id : "close",
		handler : function() {
			Ext.MessageBox.alert("工具栏按钮",
					"工具栏上的关闭按钮时间被激发了")
		}
	}]
 });

id的枚举值有如下的值：

toggle (collapsable为true时的默认值)    close    minimize    

maximize    restore    gear    pin

unpin    right    left    up    down    refresh    minus    

plus    help    search    save    print

这里还有一个讲的比较深入的blog

http://tianmoboping.blog.163.com/blog/static/157395322008431115120641/

 

下面是一个viewprot的例子

Extjs中还有一个可以显示在整个body中的组件Ext.ViewPort，它会随着浏览器而变化。要注意的是一个页面中只能存在一个viewport的实例。

/**
 * viewPort
 */
 var view=new Ext.Viewport({ 
        enableTabScroll:true, 
        layout:"fit", 
        items:[ 
            { 
                title:'标题', 
                html:"内容", 
                bbar:[ 
                    {text:"按钮1"} 
                ] 
            } 
        ] 
}); 

下面是个tabPanel的例子

/**
 * tabPanel
 */
var tabpanel=new Ext.TabPanel({ 
    activeTab:0,    //设置默认选择的选项卡 
    renderTo:Ext.getBody(), 
    width:200, 
    height:150, 
    items:[ 
        { 
            title:"第一个选项",
            html:"第一个的内容" 
        }, 
        { 
            title:"第二个选项", 
            html:"第二个的内容" 
        } 
    ] 
}); 

 

另外panel可以动态加载内容，可以参考这个文章：

http://www.blogjava.net/algz/articles/223457.html

总结一下，panel是ext中最常见的布局组件，主要是熟悉panel的常见参数，了解render和applyto的区别，另外熟悉几个复杂的例子如可拖动的panel，带有tbar和bbar及tools的panel，以及viewport和tabpanel的使用