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;
	}

评论

2 楼 forrest_lv 2012-05-30  

没搞懂这种方式

1 楼 fenfen123 2012-01-07