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

Posted 2023-02-26

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

【英文标题】：After loading store, select and show specific row in grid works in Chrome, not in IE

【发布时间】：2014-03-11 19:58:27

【问题描述】：

我想我一定是在这里做错了什么。我有一个从商店获取数据的 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，则不能只运行此代码。我不知道是否/如何将示例更改为完整的代码（同时仍然让商店自动加载数据。

【问题讨论】：

你在其他版本的 IE 上试过吗？或许可以通过在开发者工具中切换浏览器模式来尝试一下？

活动脚本是否启用？

@EmilH 在工作中，我在 IE9 和 Firefox 中尝试了我的实际代码，结果相同。我在这里提供的示例代码我只在 IE11 和 Chrome 33 上尝试过。

这个问题可能听起来很傻，但是您在 IE 上启用了开发工具吗？否则 console.log 调用会导致 IE 出错。

@overlordhammer 是的，我确实启用了它们。

【参考方案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 的完整工作示例。希望这会有所帮助。

【讨论】：

在我的情况下，它是代码确定应该选择和关注哪条记录的加载事件。我需要加载的数据以确定正确的行。例如，在小提琴中，假设我们需要选择包含 Apple 的行。另外，检查getCount() == 0 是否意味着如果商店已经完成加载，但什么都不包含，你附加一个永远不会触发的load 处理程序？

糟糕...看来我可以修改你的小提琴了。不知道我能做到这一点。抱歉...我已经解决了我想选择包含“Apple”的行的情况。无法让它与 ExtJS 3.4.0 Classic 一起使用（可能是小提琴本身的问题）。

没问题！我正在使用解决方案设置代码，发现小提琴发生了变化:) 虽然不确定它是否会在 3.4 上以相同的方式工作，但是这里的主要问题与同步事件有关，而不是与平台本身有关。跨度>

我想我的原始代码太简单了。我们还需要能够在商店重新加载后选择并聚焦特定的行。我创建了一个小提琴的分支here。在这里，我尝试使用视图的 refresh 事件，但事件触发的顺序似乎不正确。刷新表示 store 已经加载，但是 store 的 load 事件稍后发生。

在 Ext JS 3.4 中，grid.getView 返回一个 Ext.grid.GridView，它没有 getSelectionModel。网格本身确实有它。此外，商店没有isLoading 方法。 RowSelectionModel 没有select 方法，但它有selectRow。对您的代码进行这些更改后，我在 IE11 中仍然存在原始问题。不幸的是，我无法创建它，因为如果您选择版本 3.4.1 并添加模拟数据 (posted in their forum)，sencha fiddle 会崩溃。