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