Javascript 网格面板的ExtJS Ajax问题

我的代码中有一个网格面板，如下所示：

Ext.create('Ext.grid.Panel', {
        id : 'frPanel-' + interfaceId,
        store : frStore,
        columns : [
                {
                    text : 'Sequence',
                    dataIndex : 'ruleId',
                    menuDisabled : true
                },
                {
                    text : 'Source',
                    dataIndex : 'source',
                    renderer : function(value, metaData) {
                        var newValue = convertObjValue(value);
                        if (newValue.match(/[-]+/i)) {
                            metaData.tdAttr = 'data-qtip="'
                                    + networkStore(value) + '"';
                        }
                        return newValue;
                    }
                },
// paging bar at the bottom
        dockedItems : [ {
            xtype : 'pagingtoolbar',
            store : frStore, // same store GridPanel is using
            dock : 'bottom',
            displayInfo : true
        } ],
height : 300,
        width : '100%',
        forceFit : true,
        renderTo : 'frContainer-' + interfaceId
    });

这些是我的助手函数：

// To get the value after 2nd colon for object and object-group
function convertObjValue(value) {
    var result;
    var exp = /.*?:.*?:(.*)/i;
    var newValue = value;

    if ((result = exp.exec(value)) != null) {
        if (result.index === exp.lastIndex) {
            exp.lastIndex++;
        }
        newValue = result[1];
    }
    return newValue;
}

商店：

function networkStore(value) {

//var store = Ext.create('Ext.data.Store', {
var store = new Ext.data.Store({
    model : 'networkModel',
    autoLoad : {
        timeout : 60000
    },
    proxy : {
        type : 'ajax',
        url : networkObjsURL + "&" + Ext.urlEncode({
            'peId' : value
        }),
        reader : {
            type : 'json',
            idProperty : 'objValue'
        },
     }
});
var hoverOutput = "";

if(store.data.length > 0){
store.data.items.forEach(function(item) {
    hoverOutput += item.data.objectValue + "</br>";
});
}
console.log(hoverOutput);
return hoverOutput;

现在问题来了。问题是，当我没有将断点放在存储区的浏览器中时，值不会显示在qtip中。我猜这是因为网格面板没有在ajax响应之后等待商店的响应。有人能帮我找出解决这种情况的办法吗

---

提前感谢

您尝试设置了吗

autoLoad:false 

然后是这样的：

store.load({
    callback: function(records, operation, success) {
        if (success == true) {
            //do your stuff
            var hoverOutput = "";

            if(store.data.length > 0){
            store.data.items.forEach(function(item) {
                hoverOutput += item.data.objectValue + "</br>";
            });
            }
            console.log(hoverOutput);
            return hoverOutput;
        } else {
            // the store didn't load, deal with it
        }
    }
    // scope: this,
});

store.load({
回调：函数（记录、操作、成功）{
if（success==true）{
//做你的事
var输出=”；
如果（store.data.length>0）{
store.data.items.forEach（函数（项）{
hoverOutput+=item.data.objectValue+“
”；
});
}
console.log（hoverOutput）；
返回输出；
}否则{
//商店没有装货，处理一下
}
}
//范围:本,，
});

由于断点允许您查看数据，我认为您认为这是一个延迟问题是正确的。因为Ext是异步的，所以它不会等到ajax调用完成后再继续处理。回调将帮助您管理它，因为它将在ajax返回时被调用。 我对Ext还是相当陌生，但至少这是我的理解。希望它能帮助你，或者至少为你指明正确的方向

---

编辑，因为我提醒说，有时在success中返回会使调试变得困难，等等。因此，您也可以尝试更改success以调用另一个函数，并让该函数进行处理，请记住范围。

我在评论中询问您使用的是哪个版本的ExtJS，但我没有得到回应，所以我假设您使用的是ExtJS 5

代码中的控制流对我来说很奇怪。 为什么要多次间接地（直接在

networkStore

中）在

render

函数中创建存储

然而，store是异步获取数据的，所以您必须等待/回调结果（或者使用Future/Promise API）。此外，您应该在

frStore

store（传递给网格）中拥有网格所需的任何数据。您还可以利用模型中的数据关联，也可以使用

convert

函数在模型中创建新字段，并在

render

函数中使用关联/字段的值

让我向您展示一种方法（简单的方法）

ExtJS不喜欢在render函数中修改记录，因此我们准备了一个具有必要的

qtip

值的模型

我假设您可以更早地加载

networkStore

的数据（自动加载：true），但这是为了简单起见，您可以稍后更改它，例如使用

remoteFilter

和回调

您没有显示

frStore

和底层模型的定义，因此我将使用

frStore

和

FrModel

作为类名

Ext.define('FrModel', {
  extend: 'Ext.data.Model',
  // ...
  fields: [
    // source field
    // ...
    /** qtip value **/
    {
      name: 'qtip',
      type: 'string',
      convert: function (value, record) {
        var result = '';
        // below code is from your render function with modifications
        if (record.get('rendered_source').match(/[-]+/i)) {
          result = 'data-qtip="'
             + networkStore(record.get('source')) + '"';
        }
        return result;
      },
      depends: ['source', 'rendered_source']
    },
    /** rendered source **/
    {
      name: 'rendered_source',
      type: 'string',
      convert: function (value, record) {
        var newValue = convertObjValue(record.get('source'));
        return newValue;
      },
      depends: ['source']
    }
  ]
  // ...
}

更改后，

渲染

功能很简单：

// ...
{
  text : 'Source',
  dataIndex : 'rendered_source', // this will allow users to sort & filter this field by the values which are displayed
  renderer : function(value, metaData, record) {
      metaData.tdAttr = 'data-qtip="'
        + record.get('qtip') + '"';
    }
    return value;
  }
},
// ...

您还需要一个

NetworkStore

，可以将其放在单独的文件中：（我更喜欢模型中的代理/模式，但我使用了您的代码）

最后一部分是

networkStore

函数：

function networkStore(value) {
  var store = Ext.getStore('networkStore');
  var records = store.query('peId', value, false, true, true);
  var hoverOutput = "";

  if (records.length > 0) {
    records.each(function(item) {
      hoverOutput += item.get('objectValue') + "</br>";
    });
  }

  console.log(hoverOutput);
  return hoverOutput;
}

函数网络存储（值）{
var store=Ext.getStore（'networkStore'）；
var记录=store.query（'peId'，value，false，true，true）；
var输出=”；
如果（记录长度>0）{
记录。每个功能（项目）{
hoverOutput+=item.get（'objectValue'）+“
”；
});
}
console.log（hoverOutput）；
返回输出；
}

另外，我不测试上述代码

然而，IMO正确的解决方案使用关联。我建议你阅读

您应该了解模式、代理、关联等概念

---

当您通过

peId

加入

FrModel

和

NetworkModel

时，您将不需要

NetworkStore

并基于该关联在

convert

函数中构建

qtip

。

普通人需要一些帮助！还有人想试试吗？我在这个问题上已经有一段时间了。请为这个问题创建一个提琴。你应该尝试将代码切碎，以获得重现这个问题所需的最小值。没有人想从你的应用程序中涉过一些与当前问题无关的随机代码。哪个版本的ExtJS？5.代码中的控制流对我来说很奇怪。为什么要在

render

函数中间接（直接在

networkStore

中）创建存储（多次）？然而，存储是异步获取数据的。所以您必须等待/回调结果（例如，使用Future/Promise API）。此外，您应该在

frStore

store（传递给网格）中拥有网格所需的任何数据。您可以利用模型中的数据关联，因此您可以在模型中创建新字段，也可以使用4.2.1@rzymek在

render

function.im中使用该关联

Ext.create('Ext.data.Store', { // using Ext.create is better
    model : 'networkModel',
    storeId: 'networkStore', // registering store in  Ext.data.StoreManager in order to get later this store by Ext.getStore(<store_id>)
    autoLoad : true,
    proxy : {
        type : 'ajax',
        url : networkObjsURL, // we load all records but I mentioned earlier that you can change this
        reader : {
            type : 'json',
            idProperty : 'objValue'
        },
     }
});

Ext.define('networkModel', {
    extend : 'Ext.data.Model',
    fields : [
      {
        name: 'objectValue'
      },
      {
        name: 'peId',
        type: 'int'
      }
    ]
});

function networkStore(value) {
  var store = Ext.getStore('networkStore');
  var records = store.query('peId', value, false, true, true);
  var hoverOutput = "";

  if (records.length > 0) {
    records.each(function(item) {
      hoverOutput += item.get('objectValue') + "</br>";
    });
  }

  console.log(hoverOutput);
  return hoverOutput;
}