以前Ext和后台交互都通过了Dwr,dwr返回一个Object,然后将object赋值给一个javascript变量,然后将它和datagrid绑定。
这几天做页面改造想把dwr去掉不使用dwr获取数据,而使用ext直接获取,传输格式为Json
cw_gxzt.js 此页面显示用户构造Datagrid
Ext.namespace('com.greatchn.finance.js.view');
com.greatchn.finance.js.view.cw_gxzt = function() {
};
Ext.applyIf(com.greatchn.finance.js.view.cw_gxzt.prototype, {
cw_gxztservice:null,
init:function(){
this.cw_gxztservice=new com.greatchn.finance.js.service.cw_gxztService();
var wjsZtInfoStore=this.cw_gxztservice.queryWjsZtInfo('cwGxzt.do?method=queryWjsZtlinkAndQyinfo','post','');//为接收的帐套store
/***grid**/
this.wjsgxztGrid=new Ext.grid.EditorGridPanel({
title: '未接受的帐套',
header: false,
viewConfig: {
forceFit:true
},
applyTo:'mydiv',
frame:true,
height:500,
width:520,
autoScoll:true,
layout:"fit",
store:wjsZtInfoStore,
sm: new Ext.grid.CheckboxSelectionModel(),
columns: [new Ext.grid.RowNumberer(), new Ext.grid.CheckboxSelectionModel(), {
header: "帐套名称",
dataIndex: "ztmc",
sortable: true
}
]
});
}
});
cw_gxztService.js 获取store
Ext.namespace("com.greatchn.finance.js.service");
com.greatchn.finance.js.service.cw_gxztService = function() {
};
Ext.applyIf(com.greatchn.finance.js.service.cw_gxztService.prototype, {
/**获取store信息**/
queryWjsZtInfo : function(url, method, condition) {
var store = new com.greatchn.finance.js.store.cw_gxztStore().getStore();
var conn = Ext.lib.Ajax.getConnectionObject().conn;
conn.open(method, url, false);
conn.send(condition);
//alert(conn.responseText);
var data=Ext.util.JSON.decode(conn.responseText);
store.loadData(data);
return store;
},
})
cw_gxztStore.js 创建grid所需的记录集的格式
Ext.namespace("com.greatchn.finance.js.store");
com.greatchn.finance.js.store.cw_gxztStore = function(){};
Ext.applyIf
(
com.greatchn.finance.js.store.cw_gxztStore.prototype,
{
getStore: function()
{
/* 定义记录集 */
var Cwgxzt = Ext.data.Record.create
(
[
{name: "ztmc", mapping: "ztmc"}//mapping对应json,name对应gridpanel的dataIndex
]
);
/* 定义JsonReader的元数据对象 */
var meta =
{
root:"Ztdm",//对应json最前面的{Ztdm:[{....}]}
id:'ztdm'
};
/* 创建JsonReader数据解析器 */
var JsonReader = new Ext.data.JsonReader(meta, Cwgxzt);
/* 创建内存代理 */
var memoryProxy = new Ext.data.MemoryProxy();
/* 创建数据集对象 */
var store = new Ext.data.Store
(
{
proxy:memoryProxy,
reader:JsonReader
}
);
return store;
}
}
);
后台请求的action
public ActionForward queryWjsZtlinkAndQyinfo(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response)throws Exception {
// TODO Auto-generated method stub
I_0000_ZTManageService service = (I_0000_ZTManageService)this.getService("I_0000_ZTManageService");
List list=service.getZtlinkAndQyinfoListForZtstate("U000019", "G01");
net.sf.json.JSONArray arr = net.sf.json.JSONArray.fromObject(list);//通过JSONLIB将list转成JSON
response.setCharacterEncoding("UTF-8");
response.setHeader("Pragma","No-Cache");
response.setHeader("Cache-Control","No-Cache");
response.setDateHeader("Expires", 0);
System.out.println(arr.toString());
response.getWriter().write("{Ztdm:"+arr.toString()+"}");//返回给EXT的JSON
return null;
}
分享到:
相关推荐
比如,你可以使用Ext.data.Store来存储和加载JSON数据,然后将其绑定到GridPanel、TreePanel等组件上。 ```javascript var store = Ext.create('Ext.data.Store', { model: 'User', proxy: { type: 'ajax', url...
在EXT JS中,`Ext Grid` 是一个强大的数据展示组件,它可以用来显示和操作大量数据。动态扩展功能允许我们根据需求在运行时增加或减少列,增强了应用的灵活性。本篇将详细介绍如何实现 `Ext Grid` 的列动态添加。 1...
### Ext_Js分页显示案例详解 ...此外,该案例还展示了如何从前端向后端发送请求获取数据,并通过Java对象转换为JSON格式进行返回的过程。这对于理解和掌握Ext_Js中的分页显示机制具有重要的参考价值。
Store负责从服务器获取数据,并将其与GridPanel进行绑定。 1. **设置Store**:创建一个Store实例,配置URL属性为后端处理数据库请求的URL。同时,定义store的fields属性,映射数据库表中的字段。 ```javascript ...
Ext的JSONStore可以配合Struts2的JsonResult或JsonPlugin,使Action直接返回JSON数据,从而驱动Ext的GridPanel等组件动态更新。 整合这些框架时,需要关注以下几点: 1. 配置文件的设置:确保`struts.xml`、`spring...
这里的`UserAction`类实现了Struts2的Action接口,通过调用`UserDAO`类的方法获取数据,并将其封装成JSON格式返回。 ##### 3. JavaScript脚本实现 JavaScript部分主要用于实现前端的分页效果。下面是一段简化的...
在"Ext与SSH结合案例"中,Hibernate负责在后台管理数据的增、删、改、查操作,将处理结果转换为JSON格式,供Struts2返回给前端。 在实现过程中,前端使用ExtJS的组件和API创建一个管理界面,如表格(GridPanel)...
6. **Ajax通信**:ExtJS使用Ajax技术实现异步请求,通过Ext.Ajax或Ext.data.proxy.Ajax进行后台数据的获取和提交,提高了用户体验。 7. **权限与安全**:对于实际的管理系统,权限控制和数据安全非常重要。项目可能...
**7.2 Ext.data.DataProxy -- Ext.data.Store 的数据获取器** `Ext.data.DataProxy` 是 `Ext.data.Store` 的一部分,负责从数据源获取数据。常见的 `DataProxy` 类型包括: - **AjaxProxy**: 通过 AJAX 调用获取...
例如,使用`Ext.Ajax.request`方法发送HTTP请求,获取JSON格式的数据显示在GridPanel上,或者提交FormPanel的数据到服务器进行保存。 - **添加数据**: 用户填写FormPanel中的信息,点击“保存”按钮,ExtJS通过Ajax...
它支持多种数据源,如XML、JSON和CSV,通过Store对象管理数据,并通过Proxy对象与服务器通信。GridPanel是数据展示的常用组件,它可以动态加载和编辑数据。 3. **布局管理器**:3.0版本引入了更多种类的布局管理器...
1. **Ajax通信**:ExtJS 使用Ajax进行异步请求,通过Ext.Ajax对象或者直接使用Action Components(如FormPanel)来发送GET或POST请求到服务器。这些请求可以包含数据,并接收服务器返回的数据,更新UI。 2. **JSON...
1. Store:配置数据源,可以连接到服务器端API获取数据,例如使用Ext.data.Store并配置proxy指向Struts2的Action。 2. Model:定义数据字段及其类型,用于在Store中存储和处理数据。 3. ColumnModel:设置Grid的列,...
`Store`是ExtJs中的数据容器,它可以连接到DataProxy,DataProxy负责从服务器获取数据。在动态加载的情况下,通常使用`AjaxProxy`,因为它可以异步请求数据。同时,我们需要定义`Model`来描述数据结构,这里对应的是...
使用Ext JS与PHP服务器端交互时,可以通过发送Ajax请求来获取或更新数据。 **示例:** ```javascript // 发送Ajax请求 Ext.Ajax.request({ url: 'server.php', method: 'POST', params: { action: 'get_data' ...
Store包含`fields`(字段定义)和`proxy`(数据获取方式)等配置。 6. **Ext.layout**: 布局管理器,如`FitLayout`(自适应布局)、`BorderLayout`(边界布局)和`ColumnLayout`(列布局),它们决定了组件如何填充...
总结来说,这个示例展示了如何在ExtJS应用中实现分页功能,通过JsonStore从JSP服务器获取数据。主要涉及了JsonStore、PagingToolbar、GridPanel的配置,以及服务器端数据的生成和传递。理解这个过程对于开发基于...
我们还需要在 render 事件中使用 Ext.Ajax.request 方法来请求后台的工具栏数据,并将其添加到 Toolbar 中。 ```javascript Ext.define('Ext.zc.grid.Toolbar', { extend: 'Ext.toolbar.Toolbar', alias: 'widget...
你可以定义模型(Model)来映射后端数据结构,使用`Ext.data.Store`来管理和加载数据,并通过`Ext.data.reader.Json`或`Ext.data.reader.Xml`解析服务器返回的数据。 在本教程中,你将学习如何配置`Ext.data.Model`...