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() ;
    
});