Question

我想我一定是在做错事。我有一个GridPanel从商店获取数据。商店在load事件上有一个监听器，它选择网格选择模型的第8行并尝试将其聚焦。

在Chrome（目前的版本33）中，此功能正常，指定的记录可见。在IE（版本11）中，这不起作用。在alert('pause');语句时，网格可见，指定的行可见。但在点击警告消息后，网格似乎正在做某事，之后它只显示前几行。

Ext.onReady(function() {
    Ext.QuickTips.init();

    // create the data store
    var store = new Ext.data.JsonStore({
        autoDestroy: true,
        proxy: new Ext.data.HttpProxy({url: "/Home/PersonList", method: "POST"}),
        fields: ["First", "Last", "Company", "Email"],
        autoLoad: true,
        listeners: {
            load: function(s, r, o) {
                console.log('store loaded');
                grid.getSelectionModel().selectRow(8);
                grid.getView().focusRow(8);
                alert('pause');
            }
        }
    });

    // create the Grid
    var grid = new Ext.grid.GridPanel({
        store: store,
        id: 'grid',
        columns: [{header: 'Company', dataIndex: 'Company'},
            {header: 'First name', dataIndex: 'First'},
            {header: 'Last name', dataIndex: 'Last'},
            {header: 'Email',dataIndex: 'Email'}
        ],
        height: 150,
        listeners: {
            'render': function(component) {
                console.log('grid rendered');
            }
        }
    });

    // render the grid to the specified div in the page
    grid.render(document.body);
});

如果您没有返回某些Json数据的/Home/PersonList - url，则不能只运行此代码。我不知道是否/如何将样本更改为完整的代码（同时仍然让商店自动加载数据。

Answer 1

此处的问题是您正在执行的操作的异步性。这里有两个同时进行的操作

存储加载操作
网格渲染

您的代码尝试在存储加载事件后从网格中选择第8行。但是无法保证在商店加载操作之前已经完成网格已经完成，因为商店已将 autoLoad 配置值设置为true 。 此代码适用于Chrome 而不是IE的原因是 Chrome JavaScript引擎比IE快10倍 9（IE 10和11引擎也比IE 9快得多））所以你的UI在你的加载操作完成之前被渲染。然而，这只是以正确的顺序触发事件序列的运气问题，以避免此问题您应该在UI呈现后检查当前的商店加载状态，如果它仍在加载你应该对选择操作进行处理，直到加载商店，如：

// create the Grid var grid = new Ext.grid.GridPanel({ store: store, id: 'grid', columns: [{ header: 'Company', dataIndex: 'Company' }, { header: 'First name', dataIndex: 'First' }, { header: 'Last name', dataIndex: 'Last' }, { header: 'Email', dataIndex: 'Email' }], height: 150, listeners: { 'render': function(component) { // Get sure that the store is not loading and that it // has at least a record on it if (grid.store.isLoading() || grid.store.getCount() == 0) { // If it is still pending attach a listener to load // event for a single time to handle the selection // after the store has been loaded grid.store.on('load', function() { grid.getView().getSelectionModel().select(0); grid.getView().focusRow(0); }, this, { single: true }); } else { grid.getView().getSelectionModel().select(0); grid.getView().focusRow(0); } } } });

您可以根据代码here查看完整的工作示例。希望这会有所帮助。

加载商店后，选择并在Chrome中显示网格中的特定行，而不是在IE中

1 个答案: