`
i5land
  • 浏览: 50402 次
  • 性别: Icon_minigender_1
  • 来自: 天津
社区版块
存档分类
最新评论

Ext,gridpanel通过JSON从后台action获取数据

阅读更多
以前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;
	}
0
1
分享到:
评论
2 楼 forrest_lv 2012-05-30  
没搞懂这种方式
1 楼 fenfen123 2012-01-07  
  

相关推荐

    Json(struts2+Ext)

    比如,你可以使用Ext.data.Store来存储和加载JSON数据,然后将其绑定到GridPanel、TreePanel等组件上。 ```javascript var store = Ext.create('Ext.data.Store', { model: 'User', proxy: { type: 'ajax', url...

    ext grid 动态扩展

    在EXT JS中,`Ext Grid` 是一个强大的数据展示组件,它可以用来显示和操作大量数据。动态扩展功能允许我们根据需求在运行时增加或减少列,增强了应用的灵活性。本篇将详细介绍如何实现 `Ext Grid` 的列动态添加。 1...

    Ext_Js分页显示案例详解

    ### Ext_Js分页显示案例详解 ...此外,该案例还展示了如何从前端向后端发送请求获取数据,并通过Java对象转换为JSON格式进行返回的过程。这对于理解和掌握Ext_Js中的分页显示机制具有重要的参考价值。

    Ext 连接数据库的相关操作

    Store负责从服务器获取数据,并将其与GridPanel进行绑定。 1. **设置Store**:创建一个Store实例,配置URL属性为后端处理数据库请求的URL。同时,定义store的fields属性,映射数据库表中的字段。 ```javascript ...

    struts2.1.8+spring2.5+hibernate3.2+ext3.0框架整合笔记(一)

    Ext的JSONStore可以配合Struts2的JsonResult或JsonPlugin,使Action直接返回JSON数据,从而驱动Ext的GridPanel等组件动态更新。 整合这些框架时,需要关注以下几点: 1. 配置文件的设置:确保`struts.xml`、`spring...

    Struts2+Json+ExtJS分页

    这里的`UserAction`类实现了Struts2的Action接口,通过调用`UserDAO`类的方法获取数据,并将其封装成JSON格式返回。 ##### 3. JavaScript脚本实现 JavaScript部分主要用于实现前端的分页效果。下面是一段简化的...

    Ext与SSH结合案例

    在"Ext与SSH结合案例"中,Hibernate负责在后台管理数据的增、删、改、查操作,将处理结果转换为JSON格式,供Struts2返回给前端。 在实现过程中,前端使用ExtJS的组件和API创建一个管理界面,如表格(GridPanel)...

    Extjs结合Struts版的简单书籍管理系统

    6. **Ajax通信**:ExtJS使用Ajax技术实现异步请求,通过Ext.Ajax或Ext.data.proxy.Ajax进行后台数据的获取和提交,提高了用户体验。 7. **权限与安全**:对于实际的管理系统,权限控制和数据安全非常重要。项目可能...

    老师整理的extjs学习笔记

    **7.2 Ext.data.DataProxy -- Ext.data.Store 的数据获取器** `Ext.data.DataProxy` 是 `Ext.data.Store` 的一部分,负责从数据源获取数据。常见的 `DataProxy` 类型包括: - **AjaxProxy**: 通过 AJAX 调用获取...

    Extjs+ssh 增删改查

    例如,使用`Ext.Ajax.request`方法发送HTTP请求,获取JSON格式的数据显示在GridPanel上,或者提交FormPanel的数据到服务器进行保存。 - **添加数据**: 用户填写FormPanel中的信息,点击“保存”按钮,ExtJS通过Ajax...

    Ext-3.0 源代码

    它支持多种数据源,如XML、JSON和CSV,通过Store对象管理数据,并通过Proxy对象与服务器通信。GridPanel是数据展示的常用组件,它可以动态加载和编辑数据。 3. **布局管理器**:3.0版本引入了更多种类的布局管理器...

    ExtJs的服务器端控件实现

    1. **Ajax通信**:ExtJS 使用Ajax进行异步请求,通过Ext.Ajax对象或者直接使用Action Components(如FormPanel)来发送GET或POST请求到服务器。这些请求可以包含数据,并接收服务器返回的数据,更新UI。 2. **JSON...

    ExtJS4+Struts2.1的Grid 增删改查

    1. Store:配置数据源,可以连接到服务器端API获取数据,例如使用Ext.data.Store并配置proxy指向Struts2的Action。 2. Model:定义数据字段及其类型,用于在Store中存储和处理数据。 3. ColumnModel:设置Grid的列,...

    ExtJs 实现动态加载grid完整示例

    `Store`是ExtJs中的数据容器,它可以连接到DataProxy,DataProxy负责从服务器获取数据。在动态加载的情况下,通常使用`AjaxProxy`,因为它可以异步请求数据。同时,我们需要定义`Model`来描述数据结构,这里对应的是...

    extjs ajax框架中文使用手册

    使用Ext JS与PHP服务器端交互时,可以通过发送Ajax请求来获取或更新数据。 **示例:** ```javascript // 发送Ajax请求 Ext.Ajax.request({ url: 'server.php', method: 'POST', params: { action: 'get_data' ...

    extjs3.0例子

    Store包含`fields`(字段定义)和`proxy`(数据获取方式)等配置。 6. **Ext.layout**: 布局管理器,如`FitLayout`(自适应布局)、`BorderLayout`(边界布局)和`ColumnLayout`(列布局),它们决定了组件如何填充...

    extjs 分页使用jsp传递数据示例

    总结来说,这个示例展示了如何在ExtJS应用中实现分页功能,通过JsonStore从JSP服务器获取数据。主要涉及了JsonStore、PagingToolbar、GridPanel的配置,以及服务器端数据的生成和传递。理解这个过程对于开发基于...

    extjs4.2 动态生成toolbar

    我们还需要在 render 事件中使用 Ext.Ajax.request 方法来请求后台的工具栏数据,并将其添加到 Toolbar 中。 ```javascript Ext.define('Ext.zc.grid.Toolbar', { extend: 'Ext.toolbar.Toolbar', alias: 'widget...

    extjs中文教程 ajax

    你可以定义模型(Model)来映射后端数据结构,使用`Ext.data.Store`来管理和加载数据,并通过`Ext.data.reader.Json`或`Ext.data.reader.Xml`解析服务器返回的数据。 在本教程中,你将学习如何配置`Ext.data.Model`...

Global site tag (gtag.js) - Google Analytics