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

    

});