在创建面板布局的时候，我们要先了解一下布局

上面的图示是EXT自带的布局方式，共有5块，north(上，一般做TOP用)，west(左，一般做菜单项)，center(中间，一般做main，显示页面)，east（右，系统可以拓展为信息，邮件提示，通讯录等），south(下，一般可以做FOOT页面，显示版本信息)

//设置默认图标

Ext.BLANK_IMAGE_URL = 'scripts/ext/resources/images/s.gif';

//把数据存入COOKIE      

//Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

/*树形结构*/

//注意，在添加菜单项的时候，一定要标示个ID，否则会无限添加

var purviewItems=[{

contentEl:'west',//采用的是固定格式的页面框架，west表示左边

id:'ID',

    title:'标题',

    border:false,//是否有border

    iconCls:'icon-sp-s',//菜单项所对应的图标

    href:url,//菜单项对应的访问路径

    layout:'accordion',//布局方式，accordion为下拉功能属性

    collapsible:true,

    split: true,

    items:[{

        id:'ID',

        title:"标题",

        iconCls:'icon-sp-s-add',

        border:false

    }]

}];

//创建TAB面板

var centerTabPanel=new Ext.TabPanel({

    region:'center',//部署的区域，参考上图，center是中间显示页面区域

    autoScroll:true,

    animScroll:true,

    resizTabs:true,

    enableTabScroll:true,

    activeTab:0,

    deferredRender:false,

    defaults: {

        autoScroll:true

    },

    tabMargin:0,

    items:[{

        //创建一个默认的TAB，用于显示欢迎信息

        id:'mainFrame',

        title:' ',

        iconCls:'icon-root-s',

        autoLoad:{url:'welcome.html', scripts:true},

            //html:'<iframe scrolling=auto frameborder=0></iframe>',

        autoScroll:true

  }]

});

/*启动程序，创建窗体和布局*/

Ext.onReady(function(){

var viewport=new Ext.Viewport({

    layout:'border',//布局方式，boder为区域布局

    items:[{

        //头部分

        region:'north',

        html:topUrl,//头部分，可以为页面和图片

        height:100

    },{

        region:'west',//左边的功能菜单

        id:'west',

        title:'中国移动支付平台',//TAB的名称

        split:true,

        width: 200,

        minSize: 175,

        maxSize: 400,

        collapsible: true,

        margins:'0 0 0 2',

        layout:'accordion',//下拉功能属性

la