Ext开场布局设计Viewport

//加载dwr
dwr.engine.setAsync(false);

//***************************************框架定义部分**************************************************

var store = new Ext.data.ArrayStore({
        fields: ['id', 'name', 'desc'],
        data: [
            ['1', 'name1', 'desc1'],
            ['2', 'name2', 'desc2'],
            ['3', 'name3', 'desc3'],
            ['4', 'name4', 'desc4'],
            ['5', 'name5', 'desc5'],
            ['6', 'name6', 'desc6'],
            ['7', 'name7', 'desc7'],
            ['8', 'name8', 'desc8'],
            ['9', 'name9', 'desc9'],
            ['10', 'name10', 'desc10']
        ]
    });
    var grid = new Ext.grid.GridPanel({
        title: 'grid',
        viewConfig: {forceFit: true},

        store: store,
        height:300,
        columns: [
            {header:'id', dataIndex: 'id'},
            {header:'名称', dataIndex:'name'},
            {header:'描述', dataIndex:'desc'}
        ],
        tbar: new Ext.Toolbar(['添加','修改','删除']),
        bbar: new Ext.PagingToolbar({
            pageSize: 15,
            store: store
        })
    });

  //***************************************数据加载function部分****************************************************

//  *****************************************************************************************************
//  Ext.onReady

//  ********************页面总框架方案A：viewport***************************
//Ext.onReady(function(){
//
////页面总框架方案A：viewport
//    var viewport = new Ext.Viewport({
//        layout: 'border',
//        items: [
//            {region:'north',html:'north',title:'north',height:80},
//
//            {region:'west',title:'west',width:300,
//                items:
//                    [grid,
//                       {region:'center',html:'center2html',title:'center2',autoHeight:true}]
//            },
//
//            {region:'center',html:'center',title:'center'}
//        ]
//    });
//});

//********************页面总框架方案B：viewport包含totalPanel设计tbar***************************

Ext.onReady(function(){

//页面总框架方案B：viewport的totalPanel
        var totalPanel = new Ext.Panel({
                //width:400,
                region:'center',
                tbar: new Ext.Toolbar(['viewport的PlanB']),    //框架tbar部分
                //tbarCfg :{height:200},
                //renderTo: Ext.getBody(),
                //height:640,
                border :false,
                split:true,
                id:'fp1',
                layout:'border',
                //enableTabScroll:true,
                items: [

                        {region:'north',html:'north',title:'north',height:80},

                        {region:'west',title:'west',width:300,
                            items:
                                [grid,
                                   {region:'center',html:'center2html',title:'center2',autoHeight:true}]
                        },

                        {region:'center',html:'center',title:'center'}

                    ]

        });

//页面总框架方案B：viewport
        var viewport = new Ext.Viewport({
            layout: 'border',
            items: totalPanel
        });

//        //加载数据
//        loadGridData() ;
//        loadGrid2Data() ;
//        loadGrid3Data() ;

});