以下是本人使用Ext的GridPanel、FormPanel、Viewport实现的远程数据分页读取及表单页面布局实例: <html> <head> <title>数据表格分页</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" mce_href="resources/css/ext-all.css"> <mce:style type="text/css"><!-- #customerDiv { width: 800px; position:absolute; left:50px; top:50px; } #customerDiv .x-grid-col-1 { text-align: right; } #customerDiv .x-grid-col-2{ text-align: right; } #customerDiv .x-grid-col-3 { text-align: right; } #customerDiv .x-grid-col-4 { text-align: right; } #customerDiv.x-grid-mso{ border: 1px solid #6593cf; } #customerDiv.x-grid-vista{ border: 1px solid #b3bcc0; } --></mce:style><style type="text/css" mce_bogus="1"> #customerDiv { width: 800px; position:absolute; left:50px; top:50px; } #customerDiv .x-grid-col-1 { text-align: right; } #customerDiv .x-grid-col-2{ text-align: right; } #customerDiv .x-grid-col-3 { text-align: right; } #customerDiv .x-grid-col-4 { text-align: right; } #customerDiv.x-grid-mso{ border: 1px solid #6593cf; } #customerDiv.x-grid-vista{ border: 1px solid #b3bcc0; }</style> <mce:script type="text/javascript" src="adapter/ext/ext-base.js" mce_src="adapter/ext/ext-base.js"></mce:script> <mce:script type="text/javascript" src="ext-all.js" mce_src="ext-all.js"></mce:script> <mce:script type="text/javascript"><!-- Ext.onReady(function(){ Ext.state.Manager.setProvider(new Ext.state.CookieProvider()); var oRecord = Ext.data.Record.create([ {name:"customerId"}, {name:"companyName"}, {name:"contactName"}, {name:"contactTitle"}, {name:"address"}, {name:"city"} ]); var store1 = new Ext.data.Store({ proxy:new Ext.data.HttpProxy({ //url:'http://localhost:8080/webService/servlet/CustomerServlet' url:'http://localhost/aspTest/Json/Customers.txt' }), reader: new Ext.data.JsonReader({ totalProperty: 'totalCount', root: 'result' },oRecord), listeners:{ "load":function(){ var licount=store1.getCount(); Ext.Msg.alert("Data Count",licount); } } }); var searchForm = new Ext.form.FormPanel({ frame: true, layout:'absolute', title: 'Customer Search', width: 500, defaults: {width: 500}, defaultType: 'textfield', items: [ {x:10,y:10,xtype:'label',text: 'Search Key'}, {x:50,y:10,name:'SearchKey',anchor: '70%'}, {x:10,y:50,xtype:'label',text:'Search Value'}, {x:50,y:50,name:'SearchValue',anchor: '70%'} ] }); var window = new Ext.Window({ title: 'Resize Me', width: 500, height:300, minWidth: 300, minHeight: 200, layout: 'fit', plain:true, bodyStyle:'padding:5px;', buttonAlign:'center', items: searchForm, buttons: [{ text: 'Send' },{ text: 'Cancel' }] }); //window.show(); var addForm = new Ext.form.FormPanel({ //region:"center", frame:true, labelAlign:'right', labelWidth:60, defaultType:'textfield', defaults:{ width:200, allowBlank:false }, items:[{ xtype:'hidden', name:'CustomerId' },{ fieldLabel:'客户编号', name:'CustomerId' },{ fieldLabel:'公司名称', name:'CompanyName' },{ fieldLabel:'联系人', name:'ContactName' },{ fieldLabel:'联系标题', name:'ContactTitle' },{ fieldLabel:'地 址', name:'Address' },{ fieldLabel:'城 市', name:'City' } ], buttons:[ {text:'添加'}, {text:'清空'}, {text:'删除'} ] }); var grid = new Ext.grid.GridPanel({ store: store1, id:"customerGrid", columns: [ new Ext.grid.RowNumberer(), {header: "CustomerID", width: 100, sortable: true, dataIndex: 'customerId'}, {header: "CompanyName", width: 150, sortable: true, dataIndex: 'companyName'}, {header: "ContactName", width: 120, sortable: true, dataIndex: 'contactName'}, {header: "ContactTitle", width: 80, sortable: true, dataIndex: 'contactTitle'}, {header: "Address", width: 150, sortable: true, dataIndex: 'address'}, {header: "City",width:80,sortable: true, dataIndex: 'city'} ], stripeRows: true, //autoExpandColumn: 'CustomerID', height:350, width:600, title:'Customers', bbar:new Ext.PagingToolbar({ pageSize:10, store:store1, displayInfo:true, displayMsg: 'Displaying customers {0} - {1} of {2}', emptyMsg: "No customers to display", items:[ '-', { pressed: true, enableToggle:true, text: 'Show Preview', cls: 'x-btn-text-icon details', toggleHandler: function(btn, pressed){ var view = grid.getView(); view.showPreview = pressed; view.refresh(); } }] }) }); try{ var viewPort = new Ext.Viewport({ layout:"border", items:[{ region:"west", collapsible: true, width: 600, title:"查看客户信息", items:[grid] },{ region:"center", collapsible: true, title:"编辑客户信息", items:[addForm] } ] }); } catch(e){ Ext.Msg.alert("Ext Error",e.message); } store1.load({}); //Ext.Msg.alert("Data Count",store1.getCount()); var customerGrid = new Ext.Resizable("customerGrid", { wrap:true, pinned:true, minWidth:600, minHeight: 300, preserveRatio: true } ); }); // --></mce:script> </head> <body> <div id="customerDiv"></div> </body> </html>