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>


示例代码和效果如下
Ext4 XMLStore加载webservice数据源示例


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数据源示例

评论(0)Web开发网
阅读(272)喜欢(0)extjs开发技巧