本人Extjs新手,最近项目要用Extjs做前台交互,想做一个列表,各位高手帮帮忙,怎样用Extjs接受后台数据,具体用哪个组件!谢谢!!!
------解决方案--------------------
这是前台页面表格的写法,不包含分页
- HTML code
<%@ page language="java" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>学员列表</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <link rel="stylesheet" type="text/css" href="<%=path%>/ext-3.3.1/resources/css/ext-all.css"> <script type="text/javascript" src="<%=path%>/ext-3.3.1/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="<%=path%>/ext-3.3.1/ext-all.js"></script> <script type="text/javascript"> Ext.onReady(function(){ var record_start =0; // 获取数据集方法 var store = new Ext.data.JsonStore({ url: 'common_myData.action', root: 'results', totalProperty: 'totalCount', fields: ['stuno', 'name','sex','age'], remoteSort: true }); store.load();//加载数据 //表格每列对应数据集的fields var cm = new Ext.grid.ColumnModel([ new Ext.grid.RowNumberer({ renderer:function(value,metadata,record,rowIndex){ return record_start + 1 + rowIndex; } }),{ header: "学号", dataIndex: 'stuno', sortable: true, width: 150 },{ header: "姓名", dataIndex: 'name', width:80 },{ header: "性别", dataIndex: 'sex', width: 80 },{ header: "年龄", dataIndex: 'age', sortable: true, align :'right', width:50 } ]); //构建表格列表 var grid = new Ext.grid.GridPanel({ bodyStyle:'width:100%', autoWidth:true, height:518, store: store, cm: cm, title:'学员列表', loadMask: true, renderTo:'studentsDiv',//对应body里的div的ID tools:[{ id:'close', handler:function(event, toolEl, panel){ grid.destroy(); } }] }); }); </script> </head> <body> <div id="studentsDiv"></div> </body> </html>