Ext2.0教程二：基本表格GridPanel，从后台数据库取数据

学习使用GridPanel需要先了解Json ，和 Ext.data.Store

json介绍见 http://blog.csdn.net/wayfoon322/archive/2008/07/10/2633428.aspx

Ext.data.Store介绍见：http://blog.csdn.net/wayfoon322/archive/2008/07/11/2638387.aspx

后台需要提供json数据供前台显示。比如下列的json数据

stcCallback1001

({results:6,template:

[

{id:1,name:'流程1',user:{id:1,name:'wayfoon'}},

{id:2,name:'流程2',user:{id:1,name:'wayoon'}},

{id:3,name:'流程3',user:{id:1,name:'wayfoon'}},

{id:4,name:'流程4',user:{id:1,name:'wayfoon'}},

{id:5,name:'流程5',user:{id:1,name:'wayfoon'}},

{id:6,name:'流程6',user:{id:1,name:'wayfoon'}}

]

})

stcCallback1001，由ext提供的参数callback自动生成 ，在后台代码中request.getParameter()得到，从1001开始，1002，1003

results 表示记录总数，results这个名称是自定义的，自己可以设定，比如 total:6

template 真正的数据，名称也是自定义的，以下面Ext.data.Store 中的一致就可以。

{id:1,name:'流程1',user:{id:1,name:'wayfoon'}}, 是一条记录，可以看出 user 是一个对象，如果数据中不包含对象不需要这样写

你也可以访问 'http://extjs.com/forum/topics-remote.php' 查看json数据格式，做个比较。

访问后台数据通常是一个链接，

假如你的后台采用java ，又使用Struts2.0 。一切都变的简单。你可以直接，

String info="{id:'1',name:'wayfoon'}";

request.setAttribute("info", info);

return SUCCESS;

info 是String ，值就是json格式的字符串。

假如你采用servlet则可以

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

response.addHeader("Cache-Control", "no-cache");

response.setContentType("HTML/JavaScript;charset=UTF-8");

PrintWriter out = response.getWriter();

String json = " {id:'1',name:'wayfoon'} ";

out.print(json)");

}

}

下面介绍前台Ext部分，可以直接参考

例子： EXT2.0: GridPanel 分页方法绝好例子

下面着重介绍ext和后台的交互，

var store = new Ext.data.Store({

proxy : new Ext.data.ScriptTagProxy({url:'http://extjs.com/forum/topics-remote.php'}),

reader: new Ext.data.JsonReader({

root: 'topics',

totalProperty: 'totalCount',

id: 'post_id'

},[

'post_id','topic_title','author'

])

});

store.load({params:{start:0, limit:10}});

proxy:是数据代理，数据代理（源）基类由Ext.data.DataProxy定义，在DataProxy的基础，ExtJS提供了Ext.data.MemoryProxy、Ext.data.HttpProxy、Ext.data.ScriptTagProxy等三个分别用于从客户端内存数据、Ajax读取服务器端的数据及从跨域服务器中读取数据等三种实现。

从上面代码中可以看到 代理提交的 url是 'http://extjs.com/forum/topics-remote.php' 。

实际上在后台接收到的，url是 'http://extjs.com/forum/topics-remote.php?callback=1001&start=0&limit=10' 还有一个参数忘了。

后台处理代码：struts2.0

public String execute() throws Exception

{

String action = request.getParameter("action");

String info = "";

String callback = request.getParameter("callback");

String start = request.getParameter("start");

String limit = request.getParameter("limit");

StringBuffer text = new StringBuffer();

List<?> list = 从数据库中去的数据,你可以分页取;

Integer limit = tv.getStart() + tv.getLimit();

if (limit > list.size())

{

limit = list.size();

}

List<?> templates = list.subList(start, limit);

text.append(callback + "({results:" + list.size()

+ ",template:[");

for (Itemplate itemplate : templates)

{

text.append("{id:" + itemplate.getId() + ",name:'"

+ itemplate.getName() + "',user:{id:"

+ itemplate.getIuser().getId() + ",name:'"

+ itemplate.getIuser().getUname() + "'}},");

}

if (text.charAt(text.length() - 1) == ',')

{

text.deleteCharAt(text.length() - 1);

}

text.append("]})");

info=text.toString();

request.setAttribute("info", info);

return SUCCESS;

}

info就是需要的json字符串

输出

stcCallback1001

({results:6,template:

[

{id:1,name:'流程1',user:{id:1,name:'wayfoon'}},

{id:2,name:'流程2',user:{id:1,name:'wayfoon'}},

{id:3,name:'流程3',user:{id:1,name:'wayfoon'}},

{id:4,name:'流程4',user:{id:1,name:'wayfoon'}},

{id:5,name:'流程5',user:{id:1,name:'wayfoon'}},

{id:6,name:'流程6',user:{id:1,name:'wayfoon'}}

]

})

效果见 例子： EXT2.0: GridPanel 分页方法绝好例子

写完，一个上午才完成两遍，太慢了。

Ext2.0教程三：Ext2.0从新建窗口开始，见下一遍文章

教程下载地址：http://download.csdn.net/source/594644

---wayfoon 20080827