Ext4 XMLStore加载webservice数据源示例
Ext4使用XMLStore加载webservice时,返回XML不同返回json格式那么严格,返回json需要注意的事项多。
返回xml和平时用ajax get/post请求普通页面一样,有参数get请求附加在url后面,post请求则在ajax对象的send中发送url键值对就行。
只要配置过web.config允许get/post请求webservice后,就可以使用ajax请求webservice得到xml数据源。否则就需要购置soap信封,灰常的麻烦。
配置xml reader只需要根据返回的xml结构,设置好record配置就行了,有参数时增加extraParams配置,为json对象,ext会自动帮你处理成键值对。
要知道xml结构,直接用浏览器访问webservice.asmx/methodname就得到返回的xml内容。
本示例返回的XML结构如下
<?xml version="1.0" encoding="utf-8"?> <ArrayOfUser xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns="http://tempuri.org/"> <User> <Id>1</Id> <Name>test1</Name> </User> <User> <Id>2</Id> <Name>test2</Name> </User> <User> <Id>3</Id> <Name>test3</Name> </User> </ArrayOfUser>
示例代码和效果如下
test.asmx
using System.Web.Script.Services; using System.Web.Services; using System.Collections.Generic; namespace webservice { [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] [System.ComponentModel.ToolboxItem(false)] [System.Web.Script.Services.ScriptService] public class test : System.Web.Services.WebService { public class User { public string Id, Name;} [ScriptMethod(ResponseFormat = ResponseFormat.Json), WebMethod(EnableSession = true)] public List<User> Users(string name) { List<User> l = new List<User>(); User u = new User(); u.Id = "1"; u.Name = "test1"; l.Add(u); u = new User(); u.Id = "2"; u.Name = "test2"; l.Add(u); u = new User(); u.Id = "3"; u.Name = "test3"; l.Add(u); return l; } } }
test.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Ext4 XMLStore加载webservice数据源示例</title> <link type="text/css" rel="Stylesheet" href="resources/css/ext-all.css" /> <script type="text/javascript" src="ext-all.js"></script> <script type="text/javascript"> Ext.onReady(function () { Ext.define('Student', { extend: 'Ext.data.Model', fields: ['Id', 'Name'] }); var store = new Ext.data.Store({ model: 'Student', autoLoad: true, proxy: { type: 'ajax', //========返回XML不同返回json格式那么严格,下面的这些设置不设置都可以,但是有参数extraParams一定要设置,要不会出现缺少参数错误 //limitParam: undefined, //pageParam: undefined, //startParam: undefined, //======== extraParams:{name:"name"}, url: 'test.asmx/Users', reader: { type: 'xml', record: 'User',//////// idProperty: 'Id' } } }); var gridPanel1 = Ext.create('Ext.grid.Panel', { title: '学生信息表', store: store, width: 300, renderTo: document.body, id: 'panel', columnLines: true, columns: [{ xtype: 'rownumberer', width: 20 }, { text: '学号', dataIndex: 'Id', flex: 1, editor: { xtype: 'textfield' } }, { text: '姓名', dataIndex: 'Name', flex: 1, editor: { xtype: 'textfield' } }] }); }); </script> </head> <body></body> </html>
相关文章推荐
Ext4 JSONStore使用webservice返回的json数据
ajax webservice中试图使用 GET 请求调用方法,但不允许这样做
jQuery通过调用webservice返回json数据的问题
加支付宝好友偷能量挖...
原创文章,转载请注明出处:Ext4 XMLStore加载webservice数据源示例