Ext Accordion 和border学习

使用Ext Accordion 布局时默认展开第一个元素，当不需要展开第一项时需要给items中的每项指定collapsed:true

Ext.onReady(function(){  
	
	
	 Ext.QuickTips.init();// 这句 必须有，用于初始化提示
	 Ext.lib.Ajax.defaultPostHeader += "; charset=utf-8";
	 
    var accordion = new Ext.Panel({  
        title: "功能分组",  
        layout: "accordion",  
        layoutConfig: {  
            animate: true  
        },  
        width: 250,  
        minWidth: 100,  
        region: "west",  
        split: false,  
        collapsible: true,  //如果为true，panel是可收缩的，并且有一个收起/展开按钮自动被渲染到它的头部工具区域， 否则panel的大小是固定的，没有按钮(默认值为 false)。
        items: [  
            {title:"嵌套面板一", html:"嵌套面板一", iconCls:"save",collapsed:true},  
            {title:"嵌套面板二", html:"嵌套面板二", iconCls:"search",collapsed:true},  
            {title:"嵌套面板三", html:"嵌套面板三", iconCls:"back",collapsed:true}  
        ]  
    });  
Ext.Viewport代表浏览器窗口的整个显示区域，将document body作为渲染对象，它会根据浏览器窗口的大小自动调整自身的尺寸。
 在一个页面中只允许出现一个Viewport实例，没有提供对滚动条的支持。
      
    new Ext.Viewport({  
        title: "Viewport",  
        layout: "border", 
//一个配置对象，这个对象将被添加到所有加入这个容器的组件中，通过 items 注册，或者通过 add 方法，或者 insert 方法。 defaults属性可以包含任意个name/value属性对，这些属性将会被添加到每一个元素中 
        defaults: {  
            bodyStyle: "background-color: #FFFFFF;",  
            frame: true  
        },  
        items: [  
            accordion,  
            {region:"north", height:100},  
            {region:"center"}  
        ]  
    });  
});