的网格面板的ExtJS Ajax的问题​​

Question

我有一个网格面板在我的代码为：

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; 

最后但并非最不重要的是型号：

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

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

在此先感谢

Answer 1

你有没有尝试设置

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

由于断点可以让你看到你的数据，即时通讯想你是对的假设这是一个延迟问题。由于Ext是异步的，因此在继续处理之前不会等待ajax调用完成。回调将帮助你管理这个，因为它会在ajax返回时被调用。 我对Ext还是比较新的，但至少这是我的理解。希望它有帮助，或者至少以正确的方式指出你。

编辑，因为我提醒说，有时在成功内部有一个返回将使它很难调试，等等。所以你也可以尝试改变你的成功调用另一个函数，并让该函数执行处理，只保留范围心神。

Answer 2

我问ExtJS的版本，您正在使用的注释，但让我假设你正在使用的ExtJS 5.

控制流在你的代码是陌生的我，我并没有得到回应。 为什么你在render函数中间接创建商店（直接在networkStore）多次？不过，store正在提取异步数据，所以你必须等待/回调结果（或者使用Future/Promise API）。另外，您应该有frStore商店中的网格（您传递给网格）的任何必要数据。您还可以利用模型中的数据关联，或者可以使用convert函数创建模型中的新字段，并使用render函数中关联/字段的值。

让我告诉你如何做到这一点（一个简单的）的方法之一。

ExtJS不喜欢修改渲染函数内部的记录，所以我们准备一个具有必要的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'] 
    } 
    ] 
    // ... 
} 

这种变化render功能后很简单：

// ... 
{ 
    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，你可以在单独的文件放在：（我更喜欢在模型代理/架构，但我已经用你的代码）

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' 
     }, 
    } 
}); 

我加入peId场netowrkModel，因为我们想以后查询储存。

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

最后一部分是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; 
} 

PS。我不测试上面的代码。

但是，IMO正确的解决方案使用关联。我建议你阅读this doc。

您应该了解架构，代理，关联等概念。

当您加入FrModel与NetworkModel由peId那么你就不需要NetworkStore和你在convert功能基于该协会建立qtip。