ExtJs 学习笔记 Ext.Panle Ext.TabPanel Ext.Viewport（转）

Ext.Panel有几个子类，所以来介绍一下Panel中常见的配置属性、方法，下面内容是资料中的： 
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元素里面 
applyTo、contentEl、renderTo三者区别个人理解为：applyTo和RenderTo绑定到html元素中，contentEl则是html元素到ext组件中去。 
上面说到面板都是绑定在某个html元素中显示面板，是局部的。Extjs中还有一个可以显示在整个body中的组件Ext.ViewPort，它会随着浏览器而变化。要注意的是一个页面中只能存在一个viewport的实例。看下面的代码 

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

 与其它使用方式大同小异，Viewport不需要指定renderTo，Viewport通常用于网站主页面，Viewport常用布局有fit、border等，设置layout属性改变布局。 
基本的面板我们了解了，还有一个很重要的面板TabPanel，这里用一个小例子做说明，代码就不解释了。面板的用法是非常灵活的，我们可以发挥自己的想象力来做出漂亮的选项卡面板和实用的功能。因为它是可以无限嵌套控件的。

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

  对待本人用到的东西来做一个小设计。代码不多做讲解，发一下代码和效果吧

function viewportlayout(){ 
var view=new Ext.Viewport({ 
enableTabScroll:true, 
layout:"border", 
items:[ 
{ 
title:'面板', 
html:"没有美术细胞，布局比较难看", 
region:"north", 
height:50 
}, 
{ 
title:'菜单', 
collapsible:true, 
html:"菜单栏", 
region:"west", 
width:200 
}, 
{ 
xtype:"tabpanel", 
activeTab: 0, 
region:"center", 
items:[ 
{title:"面板1",html:"tab面板1的内容"}, 
{title:"面板2",html:"tab面板2的内容"} 
] 
} 
] 
}) 
}