extjs的语法很像java，对于这些组件的使用基本都是面向对象的。今天这部分内容，和swing 非常相似。
现亮一个window给大家看看：

对于这种var win = new Ext.Window()方式创建对象是不是感觉很亲切？
看看就这么2行代码产生的效果吧：

漂亮并不需要写多少代码。其实这里还有很多可以添加的效果，比如常见的：
    
    plain:true,（默认不是）
    resizable:false,(是否可以改变大小，默认可以)
    maximizable:true,（是否增加最大化，默认没有）
    draggable:false,（是否可以拖动，默认可以）
    minimizable:true,（是否增加最小化，默认无）
   closable:false,（是否显示关闭，默认有关闭）


而pannel 和window是差不多的，比如构造参数我都可以直接通用:

和上面对比的话只是显示函数不同，而panel是将显示的面板放到了一个div里（这么说有一点不妥），或者说参数传了个div的id 。其实也可以直接在参数中加上renderTo:"hello" ，而避免再另外调用render函数。
要想面板能收拢，加上collapsible 属性就好了。如下面代码。

对应效果：






一些常见配置参数：

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元素里面
eg：

 Ext.onReady(function()
            {
                var panel = new Ext.Panel(
                {
                    title:"标题",
                    width:300,
                    height:200,
                    //frame:true,//圆角 
                    plain:true,//方角 默认
                    collapsible:true,
                    tbar:[{text:"按钮1",handler:function(){Ext.MessageBox.alert("我是按钮1","我是通过按钮1激发出来的弹出框！")}},{text:"按钮2"}], //顶部工具栏
                                bbar:[{text:"按钮3"},{text:"按钮4"}],  //底部工具栏
                    html:'<h1>hello,my name is 274!</h1>',
                                        buttons:[{text:"按钮5"},{text:"按钮6"}], //footer部工具栏
                                        buttonAlign:"left"
                });            
                //win.show();
                panel.render("hello");
                
            });                

Tabpanel 使用：

对应的显示效果：

注意上面代码中使用了items 属性，表示子面板组。内容可以用html 元素ID 。比如：
 items:[
             {contentEl:'script', title: 'Short Text'},
             {contentEl:'markup', title: 'Long Text'}
         ]
这样这两个子面板的内容将是ID为sript 和markup 的元素内容。
也可以，以html属性直接表示子面板的内容：
 items:[
             {html:'script', title: 'Short Text'},
             {html:'markup', title: 'Long Text'}
         ]
语句解释： defaults:{autoHeight: true}, 默认自适应高度。当然这里面还可以设置为： defaults:{autoScroll: true},如果设置为 defaults:{autoScroll: true},高度就最好指定了。

下面还有一个tab面板，其子面板更多了。

我们发现renderTo 不仅可以绑在div (id) 也可以绑定在：document.body。

而其中比较特别的有：
1.autoLoad: {url: 'ajax2.htm', params: 'foo=bar&wtf=1'}
指切换到这个页面，内容显示为动态加载的，比如这里用了一个ajax方式，url 发送目标，params是参数形式。

2.listeners: {activate: handleActivate},
当面板切换到这个页面将触发事件：handleActivate

3.disabled:true,
指这个页面不能点击。

对于： plain:true, frame:true,
前者是子面板标题处样式，前者并无背景，后者有背景（看起来像个框架），请参看上图二者效果差异。

而activeTab：0 是指，默认显示（访问）的是哪一个子面板。0是第一次，如果不指定该属性，默认不显示子面板内容，只有当用户点击子面板后才显示。