extjs ajax调用存储未加载

Posted

技术标签:

【中文标题】extjs ajax调用存储未加载【英文标题】:extjs ajax call store not loading 【发布时间】:2014-01-15 23:15:02 【问题描述】:

如果与其他帖子非常相似,我提前道歉,但我在工作了一个多星期后无法让它工作。终于让webservice返回数据了,我可以看到返回的数据但是store不会加载它。除了在一种情况下:当我创建一个 ArrayStore 并将存储设置为 loadRawData 时,我在网格中看到整个响应不正确,全部显示在一列中;但很高兴看到数据。有人可以看看这个,看看为什么我的商店没有加载数据并填充网格:

   Ext.define('User', 
    extend: 'Ext.data.Model',
    fields: [
          name: 'connTime', type: 'string' ,
          name: 'userName', type: 'string' ,
          name: 'clientName', type: 'string' ,
          name: 'feedUrl', type: 'string' ,
          name: 'dconnTime', type: 'string' ,
          name: 'errMessage', type: 'string' ,
          name: 'ip', type: 'string' 
  ]
);

var myStore = Ext.create('Ext.data.Store', 
    model: 'User'
 );


 Ext.Ajax.request(
    url: 'http://dfsdfsfsfs/WCFService/WebService1.asmx/getValue',
    method: 'GET',
    success: function (response, options) 
        var s = response.responseText;
        Ext.MessageBox.alert(s, 'WOO WOO');
        myStore.loadData(s);
    ,
    failure: function (response, options) 
        Ext.MessageBox.alert('FAILED MF', 'Unable to GET');
    
);



  var grid = Ext.create('Ext.grid.Panel', 
    store: myStore,
    stateful: true,
    stateId: 'stateGrid',
    columns: [
        
            text: 'Query',
            width: 25,
            sortable: false,
            dataIndex: 'userName'
        ,
        
            text: 'Count',
            width: 5,
            sortable: true,
            renderer: change,
            dataIndex: 'ip'
        ,
        
            text: 'Last Updated',
            width: 76,
            sortable: true,
            dataIndex: 'connTime'
        ,
        
            text: 'Disconnect Time',
            width: 10,
            sortable: true,
            renderer: change,
            dataIndex: 'dconnTime'
        ,
        
            text: 'Client',
            width: 10,
            sortable: true,
            renderer: change,
            dataIndex: 'clientName'
        

    ],
    height: 350,
    width: 800,
    title: 'Active Queries',
    renderTo: 'grid-example',
    viewConfig: 
        stripeRows: true
    
);

.....

我什至尝试了一种不同的方法,但我什至看不到返回的 ajax 响应:

 var newStore = Ext.create('Ext.data.ArrayStore', 
    model: 'User',
    proxy: 
        type: 'ajax',
        url: 'http://dfsdfsfsfs/WCFService/WebService1.asmx/getValue',
        reader: 
            type: 'json',
            root: 'd',
            successProperty: 'success'
        ,
        success: function (response, options) 
            var s = response.responseText;
            Ext.MessageBox.alert(s, 'LA LA LA');
            newStore.loadData(s);
        ,
        failure: function (response, options) 
            Ext.MessageBox.alert('FAILED AGAIN', 'SUCKS');
        
    
);

编辑:

服务器响应:

"d":"connTime":null,"userName":"101591196589145","clientName":null,
   "feedUrl":null,"dconnTime":null,"errMessage":null,"ip":null

"d" root 是我手动添加的,在原始 webresponse 中不存在。我捕获它并添加根:

"connTime":null,"userName":"101591196589145","clientName":null,"feedUrl":null,
"dconnTime":null,"errMessage":null,"ip":null

编辑 2:

  Ext.define('User', 
    extend: 'Ext.data.Model',
    fields: [
          name: 'value', type: 'string' ,
          name: 'tag', type: 'string' 
    ]
);


var newStore = new Ext.data.JsonStore(
    model: 'User',
    proxy: 
        type: 'ajax',
        url: 'http://localhost:52856/WCFService/WebService1.asmx/getRules',
        reader: 
            type: 'json',
            root: 'rules',
            idProperty: 'value'                
        ,
        success: function (response, options) 
            var s = response.responseText;
            Ext.MessageBox.alert(s, 'LA LA LA');
            newStore.loadData(s);
        ,
        failure: function (response, options) 
            Ext.MessageBox.alert('FAILED AGAIN', 'SUCKS');
        
    
 );

  var grid = Ext.create('Ext.grid.Panel', 
    store: newStore,
    stateful: true,
    columns: [

这是我正在尝试的新 json:

"rules":["value":"101591196589145","tag":"16",
 "value":"102890809752267","tag":"16",    
 "value":"107821192690513","tag":"16",    "value":"111517428886211","tag":"16",
"value":"117389718398171","tag":"16","value":"12099149051","tag":"16",

好的,我发现 ext.ajax.request 调用可能存在问题。在发出请求时,商店甚至没有定义,因此数据没有加载。我怎样才能克服这个问题?

【问题讨论】:

正确的做法是在store上声明proxy并加载store。您的服务器响应是什么样的? 【参考方案1】:

这里我举个例子,和你的代码对比一下。

// defining a model
Ext.define('SampleModel', 
    extend: 'Ext.data.Model',
    fields: [
        name: 'YOUR_ID', type: 'int',
        name: 'YOUR_NAME', type: 'string'
    ]
);

// defining a store
var storeDefinition = new Ext.data.JsonStore(
    model: 'SampleModel',
    proxy: 
        type: 'ajax',
        url: '/your/url/path/data.php',
        reader: 
            // you MUST define root and idProperty
            type: 'json',
            root: 'rootList',
            idProperty: 'YOUR_ID'
        
    
);

这里的重要部分是rootidProperty。正如您所指定的,rootjson 对象的根节点。 idProperty是json对象中的唯一id。

要捕获successfailure 响应,您应该在json 对象中返回successfailure 数据。无需在 reader 部分指定 success 属性。比如;

public function dnr_info()

    $dnr    = $this->input->get('dnr', TRUE);
    $subsys = $this->input->get('subsys', TRUE);
    $data['success'] = TRUE;
    $data['data'] = $this->dnr->get_dnr_info($dnr, $subsys);
    echo json_encode($data);

上面的函数会返回json对象的success属性。

而且,这是从服务器返回的 json 对象。

"success":true,"data":"SUBSYS_ART_NR":"136451","ART_NR":"459993","ACTION_DESC":"BAKKAL AKT\u0130V\u0130TES\u0130 (176)","ACTIONS_NR":"130012676","START_DATE":"19.12.2013","STOP_DATE":"16.01.2014","DISCOUNT_TYPE":"SPECIAL PRICE","LEVEL_TYPE":"QUANTITY","LEVEL_IMPACT":"MULTIPLE","BASIS":"ARTICLE","LEVEL_1":"1 ADET","VALUE_1":"5,92","NWW_VK_PREIS":"6.69","KOLLI_VK_PREIS":"6.69"
// here is the another sample for root which is articleList, idProperty which is ARTICLE_ID 
"articleList":["ARTICLE_ID":"193","ART_NR":"225","ART_DESC":"27*1\/5LT.M.NEK.TAMEK.","SORTEN_TEXT":"ELMA","VAR":"1","GEBI":"1","SUBSYS_ART_NR":"225","NWW_VK_PREIS":"14.49","KOLLI_VK_PREIS":"14.49","DNR_ID":null,"STATUS":"0",

【讨论】:

非常感谢详细的分类。我将我的代码更改为一个简单的示例,使用您的作为模板,但仍然没有。使用提琴手,我看到甚至没有调用网络服务。 你认为这与异步调用有关吗?Web服务返回数据但没有及时创建存储 我使用了提琴手,据我所知,该网址甚至没有被调用;但如果我在浏览器中粘贴它是有效的 你用的是什么方法? POST 还是 GET? GET,我意识到 web 服务有问题,因为它仍然返回 xml,尽管它看起来像 json。感谢您的所有帮助。【参考方案2】:

不太清楚你是怎么让自己陷入这种状态的。 SDK 下载中有大量加载网格的示例。代理没有失败/成功方法。

小提琴here。工作代码:

Ext.onReady(function() 

    Ext.define('User', 
        extend: 'Ext.data.Model',
        fields: [
            name: 'value',
            type: 'string'
        , 
            name: 'tag',
            type: 'string'
        ]
    );


    var store = new Ext.data.Store(
        model: 'User',
        proxy: 
            type: 'ajax',
            url: 'data.json',
            reader: 
                type: 'json',
                root: 'rules'
            
        
    );
    store.load();

    var grid = new Ext.grid.Panel(
        renderTo: Ext.getBody(),
        width: 400,
        height: 400,
        store: store,
        columns: [
            text: 'Value',
            dataIndex: 'value',
            flex: 1
        , 
            text: 'Tag',
            dataIndex: 'tag'
        ]
    );
);

【讨论】:

感谢您的回复。在使用您的链接后,我终于想出专注于实际的 Web 服务,发现它必须是 Web 服务,因为它仍然返回用 tempuri.org"> 包装的内容,尽管它看起来像 json。我将 contentType 更改为 json,但还没有弄清楚。但至少它消除了 extjs 代码的问题。感谢您提供更多建议。 那就帮不了你了。祝你好运。

以上是关于extjs ajax调用存储未加载的主要内容,如果未能解决你的问题,请参考以下文章

ExtJS - app.json 中指定的 JavaScript 资产未加载?

ExtJS 4:存储数据未填充存储加载回调函数中的数据

中止 ext js 网格存储 ajax 调用

ExtJS json 存储未填充

ExtJS 4:使用代理加载的数据存储显示 0 长度

如何使用 JSON 数据数组加载 extjs 3.4 存储