javascript – 网格面板的ExtJS Ajax问题

2019-07-08 14:37:32 阅读：176 来源： 互联网

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

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响应之后没有等待来自商店的响应.有人可以帮我解决这种情况的解决方法吗？

提前致谢

解决方法:

你试过设置吗？

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的新手,但至少这是我的理解.希望它有所帮助,或者至少以正确的方式指出你.

编辑,因为我提醒说,有时在成功中返回将使调试变得困难等等.所以你也可以尝试改变你的成功来调用另一个函数并让该函数进行处理,只需记住范围.

标签：javascript,ajax,extjs
来源： https://codeday.me/bug/20190708/1402912.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – 网格面板的ExtJS Ajax问题