Extjs学习------MVC结构的开发（从后台获取数据显示到Grid）

Extjs学习------MVC结构的开发（从后台获取数据显示到Grid）

上次是一个登陆的Form，大概就是从Extjs前台获取数据，提交到后台的Action进行验证，这次是一个从后台的Action获取数据，然后将其显示到前台Extjs的Grid中，截图如下：



文档目录结构：

DHApp（所有的Ext的app文件夹都放在这个里边）

|---OrganizationApp（显示所有部门的类似于表格的ext，继承自Ext.grid.panel）

|---controller(包含文件：OrgCtrl.js)

|---model (包含文件：OrgModel.js)

|---store (包含文件：OrgStore.js)

|---view (包含文件：OrgList.js)

|---OrgApp.js

首先仍然是创建一个入口app，即OrgApp.js



这里的xtype：‘orglist‘即为view下边的OrgList.js，是页面显示的Grid的布局文件



Grid里边要显示的内容是什么呢？这个就是通过 store : 'OrgStore'这句话来解释了，从OrgStore.js里边的配置可以找到数据源，也就是Grid要显示的数据：



而上边Store存储数据的项都有那些则是通过OrgModel来定义的：

这里获得的json数据只有两个：机构名称、所属机构名称



Store获取数据的数据源为：url: 'jsp/orgAction.do?method=getOrgData'

数据解析的类型和Store中存储的总记录数、存储记录的根节点都在proxy中进行定义

下面是后台获取数据的代码（对数据库访问的DAO和获取数据的代码就不贴了）：



由于通过queryDao.GetOrganizationData()直接从数据库获得的数据时一个list，而list中存储的每一条记录都是一个Object数据，这个数组里边存储的就是我们的Grid中的一行要显示的数据，所以通过下边的for循环对获取的数据进行格式上的规范化，然后通过response将数据传出

对了，传递的代码如下：

public void SendMessage(HttpServletResponse response, String content) throws IOException {

response.setContentType("application/xml;charset=utf-8");

response.setCharacterEncoding("UTF-8");

response.getWriter().write(content);

}
Struts2中可以通过HttpServletResponse response = ServletActionContext.getResponse()来获取response对象，而Struts1中由于函数参数中直接已经存在了response对象，所以就通过传递参数来解决了

用FireFox的firebug拦截下来的Extjs在前台获取的数据的格式截图如下：



前边尝试的时候是从json文件中获取数据的，在从后台获取数据的时候关于struts1得到了数据如何传出去纠结了老半天，刚开始时直接自定义函数，没有任何参数，然后从外边访问，结果肯定出错了，后来加了参数，仍然不行，最后将返回值改成ActionForward，算是勉强搞定了，后来查了资料有了一定的了解

现在暂时没有加入分页的代码，比较糙。