Question

我在渲染列时出现问题。

相关列应显示错误图像或成功图像，并且在进行验证时应显示加载gif。一切都运行良好，直到测试超过40条记录，然后发生错误。基本上错误是它既不加载图像也不加载gif加载。

该过程非常简单，对于每条记录都完成了AJAX查询。此查询创建pdf文件并返回该文件的名称。创建完所有pdfs文件后，将文件联合并显示在屏幕上。

我尝试使用fiddle来模拟错误，但是在小提琴中不会发生错误。小提琴和应用程序之间的唯一区别在于，在小提琴中添加了timeout来模拟AJAX请求的响应时间。

错误未发生时，

Here is an image正确的表格错误发生时Here is an image，不会显示gif loading 错误发生时Here is an image，不会显示图片apply。

在带有错误的图像中，您可以验证标签是否正确添加了图像或gif，但是它没有更新屏幕。

详细信息，在浏览器Edge（40.1）中运行良好，此错误发生在Chrome（63）和Firefox（Quantum）中。旧版本没有测试。

另一个细节是只有图像和gif，其他列的文本都正确更新信息。

以下是小提琴代码：

 var store = Ext.create('Ext.data.Store', {
     storeId: 'simpsonsStore',
     fields: ['name', 'email', 'icon', 'phone'],
     data: [{
             "name": "Test",
             "email": "email@test.com",
             "icon": "1",
             "phone": "33333333333"
         },
          .
          .
          .
         {
             "name": "Test",
             "email": "email@test.com",
             "icon": "1",
             "phone": "33333333333"
         }
     ]
 });

 var grid = Ext.create('Ext.grid.Panel', {
     title: 'Simpsons',
     store: Ext.data.StoreManager.lookup('simpsonsStore'),
     columns: [{
             header: 'Name',
             dataIndex: 'name',
             width: 200,
             editor: 'textfield'
         },
         {
             header: 'Email',
             dataIndex: 'email',
             width: 300,
             editor: 'textfield'
         }, 
         {
            header: '',
            dataIndex: 'icon',
            sortable: true,
            menuDisabled: true,
            width: 30,
            align: 'center',
            renderer: function (value, metaData, record, rowIndex, colIndex, store) {
                var returnValue = '';
                //
                switch (value) {
                    case '1':
                        returnValue = '<img src="https://i.imgur.com/H9ezVYF.png" style="cursor:pointer;"  width="13" height="13">';
                        break;
                    case '2':
                        returnValue = '<img src="https://i.imgur.com/g2bz2ak.png" style="cursor:pointer;"  width="13" height="13">';
                        break;
                    case '3':
                        returnValue = '<img src="https://i.imgur.com/z7gwGoJ.gif" style="cursor:pointer;"  width="13" height="13">';
                        break;                        
                }
                //
                return returnValue;
            }             
         },
         {
             header: 'Phone',
             dataIndex: 'phone',
             width: 200
         }
     ],
    viewConfig: {
        markDirty: false
    },     
     dockedItems: [{
        dock: 'top',
        xtype: 'toolbar',
        items: [{
            xtype: 'button',
            text: 'Load Rows',
            autoEl: { tag: 'center' },
            iconCls: 'x-tbar-loading',
            handler: function () {
                //
                // 
                for (var i = 0; i < 49; i++) {
                    //
                    var record = store.getAt(i);
                    record.beginEdit();
                    record.set('icon', '3');
                    record.endEdit();
                }
                //
                for (var i = 0; i < 49; i++) {
                    //
                    var dt = new Date();
                    console.log('for 1 -> ' + i + ' : ' + dt.getHours() + ':' + dt.getMinutes() + ':' + dt.getSeconds())
                    //
                    // Here instead of time out has an AJAX request
                    setTimeout(myFunction, ((i + 1) * 1000), i);
                }
            }            
        }]         
     }],
     selType: 'rowmodel',
     height: 650,
     width: 800,
     renderTo: Ext.getBody()
 });

function myFunction(i)
{
    var dt = new Date();
    console.log('for 2 -> ' + i + ' : ' + dt.getHours() + ':' + dt.getMinutes() + ':' + dt.getSeconds())
    //
    var record = store.getAt(i);
    record.beginEdit();
    record.set('icon', '2');
    record.endEdit();
}

extjs - 网格列渲染失败

0 个答案: