首页 > 代码库 > Ext开场布局设计Viewport

Ext开场布局设计Viewport

//加载dwrdwr.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() ;    });

 

Ext开场布局设计Viewport