extjs - extjs 4.1 网格在加载时挂起 - 随机

Question

我希望我的问题有解决方案。我正在使用 Extjs 4.1。我有一个带有面板的视口，允许在顶部输入搜索参数，在底部输入 2 个选项卡。两个选项卡都有网格。两个选项卡上的网格在设置中非常相似（不是数据）。

网格支持远程排序和过滤，还支持分组。两个网格都有 autoload = false 的存储，采用 2 个额外参数（日期和类型），buffered = true 和 pageSize = 100。

代理类型是休息。
单击顶部面板中的搜索按钮时，会同时加载两个网格。搜索参数作为额外参数传递。

我将 ajax 超时设置为 10 分钟。

有时当我单击顶部的搜索按钮时，其中一个网格与加载蒙版堆叠在一起。日志文件显示控制器被调用并返回结果很好。看起来像当 json 被打包时 - 网格加载停止了。此时我将无法升级到新版本。

有什么建议么？可能是如何检测负载何时挂起并重试？谢谢你。

编辑：如果我按下搜索按钮，似乎几乎每次都会发生，当我在一个选项卡上看到加载掩码时，我很快就会切换到另一个选项卡。如果该选项卡尚未完成加载，它将卡在该位置。

编辑：添加了一些代码 - 基本上任何时候在商店调用 load() - 这可能会发生。

index.cshtml
    <script type="text/javascript">
    Ext.require([
        'Ext.container.Viewport',
        'Ext.grid.*',
        'Ext.form.*',
        'Ext.Date.*',
        'Ext.ux.CheckColumn',
        'FICMTB.ui.PanelForSearch',
        'FICMTB.ui.ManagerSearchResultsCancelTabPanel',
        'FICMTB.ui.ManagerSearchResultsLateTabPanel'
    ]);

    Ext.onReady(function () {
        initialize();
    });

    function initialize() {
        Ext.Ajax.timeout = 60000; // 60 seconds

        var searchPanel = Ext.create('FICMTB.ui.PanelForSearch');
        var searchResultsCancelPanel = Ext.create('FICMTB.ui.ManagerSearchResultsCancelTabPanel');
        var searchResultsLatePanel = Ext.create('FICMTB.ui.ManagerSearchResultsLateTabPanel');
        // tried to remove the loading - if the response already processed
        Ext.Ajax.on('requestcomplete', function (conn, resp, opts) {
            if (!Ext.Ajax.isLoading()) {
                searchResultsCancelPanel.grid.loadMask && searchResultsCancelPanel.grid.loadMask.hide();
            }
        });

        var tabPanel = Ext.create('Ext.tab.Panel', {
            layout: 'fit',

            items: [{
                title: 'Cancel',
                layout: 'fit',
                xtype: 'container',
                height: 'auto',
                width: 'auto',
                items: searchResultsCancelPanel 
            }, 
            {
                title: 'Late',
                layout: 'fit',
                xtype: 'container',
                height: 'auto',
                width: 'auto',
                items: searchResultsLatePanel 
            }]
        });

        searchPanel.on('searchTriggered', function (searchPanel, date, type) {
            searchResultsCancelPanel.date = date;
            searchResultsCancelPanel.type = type;
            searchResultsCancelPanel.load(date, type);

            searchResultsLatePanel.date = date;
            searchResultsLatePanel.type = type;
            searchResultsLatePanel.load(date, type);

        });

        var viewport = Ext.create('Ext.container.Viewport', {
            layout: 'border',
            items: [
                {
                    region: 'north',
                    title: 'Search Area',
                    xtype: 'panel',
                    split: false,
                    layout: 'vbox',
                    bodyPadding: 10,
                    border: 0,
                    items: [searchPanel]
                },
                {
                    layout: 'fit',
                    height: 'auto',
                    region: 'center',
                    title: 'Trades',
                    items: [tabPanel]
                }

           ]
        });

    };

    </script>

this is one of the panels that have grids (second is pretty much the same and the problem could happen to either - I didn't realize that I don't need this panel and just use a grid -which is also a panel - but I'm not going to change it now if it doesn't help to solve the loading data issue.

ManagerSearchResultsCancelTabPanel.js

Ext.ns('FICMTB.ui');
Ext.define('FICMTB.ui.ManagerSearchResultsCancelTabPanel', {
    extend: 'Ext.panel.Panel',
    layout: { 
        type: 'vbox',
        align: 'stretch',
        pack: 'start'
    },


initComponent: function () {
    var me = this;

    me.grid = Ext.create('FICMTB.ui.ManagerTransactionsCancelGrid', {
        flex: 1
    });
    me.items = [me.grid];

    me.date = 'value';
    me.Type = 'value';

    me.callParent(arguments);
},

load: function (date, type) {
    var me = this;
    var store = me.grid.getStore();
    store.addExtraParam(date, type); 
}
});

ManagerTransactionsCancelGrid.js

Ext.Date.patterns = {
    ISO8601Long: "Y-m-d H:i:s",
    ISO8601Short: "Y-m-d",
    ShortDate: "n/j/Y",
    LongDate: "l, F d, Y",
    FullDateTime: "l, F d, Y g:i:s A",
    MonthDay: "F d",
    ShortTime: "g:i A",
    LongTime: "g:i:s A",
    SortableDateTime: "Y-m-d\\TH:i:s",
    UniversalSortableDateTime: "Y-m-d H:i:sO",
    YearMonth: "F, Y"
};

Ext.define('FICMTB.ui.DisableCheckColumn', {
   extend: 'Ext.ux.CheckColumn',
   alias: 'widget.disablecheckcolumn',

   processEvent: function (type, view, cell, recordIndex, cellIndex, e) {
    var enabled = Ext.query('[class*=disabled]', cell).length == 0,
        me = this;

    if (enabled) {
        me.callParent(arguments);
    }
    },

});

Ext.define('Ext.form.field.DateDisplay', {
    extend: 'Ext.form.field.Display',
    alias: 'widget.datedisplayfield',
    dateFormat: 'm/d/Y',
    valueToRaw: function (value) {
        var me = this;
        return Ext.Date.format(value, me.dateFormat);
    },
    rawToValue: function (rawValue) {
        var me = this;
        return Ext.Date.parse(rawValue, me.dateFormat);
    }
});

Ext.ns('FICMTB.ui');

Ext.define('FICMTB.ui.ManagerTransactionsCancelModel', {
extend: 'Ext.data.Model',
fields: [
    { name: 'CancelId' },
    { name: 'Date' },
    { name: 'sort_alpha_key' },
    { name: 'cancel_ind' },
    { name: 'qty' },
    { name: 'prx' },
    { name: 'originator' },
    { name: 'comments' },
    { name: 'ErrorReason' },
    { name: 'ErrorSource' }
    ],
    idProperty: 'CancelId'
});

FICMTB.ui.managerEditFormInstance = Ext.create('FICMTB.ui.ManagerEditForm').hide();

Ext.define("FICMTB.ui.ManagerTransactionsCancelGrid", {
extend: "Ext.grid.Panel",
requires: ['FICMTB.ui.ManagerTransactionsCancelModel',
            'Ext.ux.grid.RowActions',
            'Ext.ux.grid.FiltersFeature',
            'Ext.ux.grid.filter.ListFilter',
            'Ext.ux.grid.menu.ListMenu',
            'Ext.ux.grid.menu.RangeMenu'],
itemId: 'managerCancelGridId',
initComponent: function () {
    var me = this;

    me.columns = me.buildColumns();

    me.features = [Ext.create('Ext.grid.feature.Grouping', {
groupHeaderTpl: 'Cancel Info: {name} ({rows.length} Item{[values.rows.length > 1 ? "s" : ""]})',
    enableGroupingMenu: false
 })];

    me.store = Ext.create('Ext.data.Store', {
        model: 'FICMTB.ui.ManagerTransactionsCancelModel',
        remoteSort: true,
        storeId: 'ManagerTransactionsCancelStoreId',
        autoLoad: false,
        buffered: true,
        groupField: 'sort_alpha_key',
        addExtraParam: function (date, type) {
            this.proxy.extraParams = this.proxy.extraParams || {};
            this.getProxy().extraParams.aDate = date;
            this.getProxy().extraParams.aType = type;
            this.proxy.applyEncoding(this.proxy.extraParams);
            this.load();
        },
        pageSize: 100,
        proxy: {
            type: 'rest',
            timeout: 600000,

            url: '/Manager/ManagerCancelTransactions/',
            reader: {
                type: 'json',
                root: 'Transaction',
                totalProperty: "Total"
            },
            writer: {
                type: 'json',
                root: 'Transaction'
            }

        }
    });

    me.selModel = new Ext.selection.RowModel({
        singleSelect: true
    });
    me.dockedItems = me.buildDockedItems();
    me.autoSizeColumns = true;

    me.autoScroll = true;
    me.forcefit = true;

    me.callParent(arguments);
},

  showEditForm: function (rec) {
    var me = this;
    FICMTB.ui.managerEditFormInstance.setPosition(100, 100);

    FICMTB.ui.managerEditFormInstance.form.setActiveRecord(rec || null);
    FICMTB.ui.managerEditFormInstance.show();
 },
  // inline buttons
  buildDockedItems: function () {
    var me = this;
    return [{
        xtype: 'toolbar',
        items: [{
            text: 'Save All Changes',
            tooltip: 'Save All Changes',
            icon: '/./Content/images/save.gif',

            handler: function () {
                Ext.Msg.confirm('confirm', 'Save All Changes?', function (btn) {
                    if (btn !== 'yes')
                        return;
                    //alert("Save");
                    me.getStore().save();
                });

            }

        }, '-', {
            text: 'Approve All and Save',
            tooltip: 'Approve and Save All Changes',
            icon: '/./Content/images/add.png',

            handler: function (button, event) {
                Ext.Msg.confirm('confirm', 'Approve All and Save?', function (btn) {
                    if (btn !== 'yes')
                        return;
                     //alert("Save All");
                    Ext.Ajax.request({
                        url: '/Manager/ApproveAllTransactions/',
                        params: {
                            aDate: me.getStore().getProxy().extraParams.aDate,
                            aBondType: me.getStore().getProxy().extraParams.aBondType,
                            aTabType: "CANCEL"
                        },
                        success: function (response) {
                            me.getStore().load();
                        },
                        timeout: 60000
                    });
                });

            }

        }, '-', {
            itemId: 'DeclineAllSave',
            text: 'Decline All and Save',
            tooltip: 'Decline All Changes and Save',
            icon: '/./Content/images/delete_icon.png',
            handler: function (button, event) {
                Ext.Msg.confirm('confirm', 'Decline All and Save?', function (btn) {
                    if (btn !== 'yes')
                        return;
                    //alert("Decline and Save All Pressed");
                    Ext.Ajax.request({
                        timeout: 60000,
                        url: '/Manager/DeclineAllTransactions/',
                        params: {
                            aDate: me.getStore().getProxy().extraParams.aDate,
                            aBondType: me.getStore().getProxy().extraParams.aBondType,
                            aTabType: "CANCEL"
                        }, 
                        success: function (response) {
                            me.getStore().load();
                        }

                    });

                });
            }
        }]
    }];
  },

  buildColumns: function () {
    var me = this;

    return [
    { xtype: 'rowactions', hidden: true, hideable: false,
        actions: [{}],
        keepSelection: true,
        groupActions: [{
            iconCls: 'icon-grid',
            qtip: 'Action on Group',
            align: 'left',
            callback: function (grid, records, action, groupValue) {
                me.showEditForm(records);
            }
        }]
    },
    { text: 'Date', dataIndex: 'Date', width: 70, sortable: true, 
      renderer: Ext.util.Format.dateRenderer(Ext.Date.patterns.ShortDate) },
    { text: 'cancel indicator',
        dataIndex: 'cancel_ind',
        sortable: true,
        width: 50,
        itemId: 'cancel_indId',
        xtype: 'disablecheckcolumn',
        listeners: {
            checkchange: function (column, recordIndex, checked) {
                var grid = column.findParentByType('grid'),
                    store = grid.getStore(),
                    record = store.getAt(recordIndex),
                    group = record.get("sort_alpha_key"),
                    groupRecords = store.query('sort_alpha_key', group);


                groupRecords.each(function (rec) {
                    rec.set('cancel_ind', checked);

                });
            }
        }
    },
    { text: 'sort_alpha_key', dataindex: 'ControlNumCusipCombination', hidden: true, 
      hideable: false },
    { text: 'qty', dataIndex: 'qty', width: 50, sortable: true },
    { text: 'prx', dataIndex: 'prx', width: 50, sortable: true },
    { text: 'originator', dataIndex: 'originator', width: 90, sortable: true },

    { text: 'comments', dataIndex: 'comments', width: 120, sortable: true },
    { text: 'Error Source', dataIndex: 'ErrorSource', sortable: true, width: 70 },
    { text: 'Error Reason', dataIndex: 'ErrorReason', sortable: true, width: 70 }];
 },
 width: 'auto'
 });