Ext+asp.net怎樣將數據庫的內容讀取顯示

首先導入ext的包包，樣式庫等 其次就是做壹個 extgrid，裏面定義顯示的屬性，值等等。header裏面的值要和妳數據源的值對應。 其次定義數據源，發送到後臺的。 後臺可以返回xml，也可以返回json的字符串。 附：大概的例子： //頁面加載時執行的操作------------------------------------------------- Ext.onReady(function(){ //alert(document.all('AreaID').value); createPanel(); createLayout(); }); //公***變量----------------------------------------------------------------- var panels; //布局管理-------------------------------------------------------------- function createLayout(){ new Ext.Viewport({ layout:'border', items:[{ region:'center', id:'panel', xtype:'panel', //activeTab:0, layout:'fit', contentEl:'dms-content', items:panels }] }) } //搭建壹個右面的面板，裏面包含了壹個grid------------------------------------- function createPanel(){ //詳細 //----構建grid grid = new Ext.grid.GridPanel({ id:'SearchGrid', loadMask:{msg:"數據加載中，請稍等..."}, height:400, store:ds, columns:[ {header:'工號',dataIndex:'workNo',width:100}, {header:'姓名',dataIndex:'name',width:100}, {header:'卡號',dataIndex:'cardNO',width:100}, {header:'部門',dataIndex:'deptname',width:80}, {header:'職務',dataIndex:'dutyName',width:80}, {header:'當前基站',dataIndex:'jiZhan',width:130}, {header:'入井時間',dataIndex:'inTime',width:160}, {header:'井下停留時長',dataIndex:'overTime',width:130}, {header:'進入時間',dataIndex:'enterTime',width:160}, {header:'超時',dataIndex:'overTime1',width:130} ], tbar:[ '工號：','-',{ xtype:"textfield", width:80, name: 'personID' },'-', '卡號：', '-', { xtype:"textfield", width:80, name: 'cardNo' },'-', '姓名(拼音縮寫)：', '-', { xtype:"textfield", width:80, name: 'userName' },'-', { text:'查詢', iconCls:'tool-find', handler:function(){ var thisname = Ext.getDom('personID').value var thisenname = Ext.getDom('cardNo').value var username = Ext.getDom('userName').value //alert(thisname+"|"+thisenname); searchFn(thisname,thisenname,username) ds.reload() } }], bbar:new Ext.PagingToolbar({ store:ds, displayMsg: '當前顯示第 {0} 條到 {1} 條記錄，壹*** {2} 條', emptyMsg: "沒有記錄", displayInfo:true, pageSize:20 }), border:false , view: new Ext.grid.GroupingView({ showGroupName: false, enableNoGroups:false, // REQUIRED! hideGroupedColumn: true }), animCollapse: false }); panels = new Ext.Panel({ border: false, layout:'fit', title:'區域下井人員信息列表', items: grid }); } var reader = new Ext.data.JsonReader({ totalProperty:'total', root:"demo", fields: [ "personID", "workNo", "cardNO", "jiZhan", "name", "dutyName", "deptname", "inTime", "overTime", "enterTime", "overTime1" ] }); //定義的數據源-------------------------------------------------------------------------- var ds = new Ext.data.GroupingStore({ reader:reader, remoteSort: true, groupField:'jiZhan', proxy: new Ext.data.HttpProxy({ url:'../servlet/PersonListServlet?AreaID='+document.all('AreaID').value }), groupField:'jiZhan', sortInfo:{field:'jiZhan', direction: "ASC"}, baseParams:{ limit:20 }, totalProperty:'total', root:'demo' }); ds.load({ params:{start:0} }); var summary = new Ext.grid.GroupSummary(); //數據源重載 function searchFn(personID,cardNo,name) { // 獲取Grid var grid = Ext.getCmp("SearchGrid"); if(grid == null) { Ext.MessageBox.show({ title: '提示信息', msg: '找不到列表控件！', buttons: Ext.MessageBox.OK, icon: Ext.MessageBox.ERROR }); return; } // 獲取Grid中的數據存儲 var store = grid.store; if(store == null) { Ext.MessageBox.show({ title: '提示信息', msg: '找不到數據適配器！', buttons: Ext.MessageBox.OK, icon: Ext.MessageBox.ERROR }); return; } // 把數據加載到數據存儲中 store.load({ // 傳壹些搜索參數 params:{ start: 0, limit: 20, workNo: personID, cardNo : cardNo, Name: name } }); // 把參數保存到數據存儲中(把上面除了start和limit不復制之外，把全部復制下來就可以了) store.on('beforeload',function() { Ext.apply( this.baseParams, { workNo: personID, cardNo : cardNo, Name: name }); }); }