extjs5 store.load()之后无法获取数据问题

最新推荐文章于 2022-02-18 16:38:09 发布

原创最新推荐文章于 2022-02-18 16:38:09 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

extjs 专栏收录该内容

2 篇文章

订阅专栏

本文介绍在ExtJS框架中解决异步加载数据时的问题，通过调整代码逻辑，在数据加载完成后正确执行后续操作，确保应用程序正常运行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求:页面打开的时候,主视图展示所有,辅视图不显示,在增加搜索条件之后,辅视图需要默认展示主视图第一条记录.简略页面如下

页面是用extjs5搭建的,我查了下百度,extjs store.load()是异步请求,所以导致接下来的渲染失败,失败的代码如下:

search_order_txnNo = orderTxnNo.getValue();
        search_detail_order_id = "";
        search_order_payment_id = "";
        orderPaymentDetailStore.clearData();
        orderPaymentDetailStore.removeAll();
        orderPaymentDetailStore.load();
        var count = orderPaymentDetailGrid.getStore().getCount();
        if(count > 0){
            var record = orderPaymentGrid.getStore().getAt(1);
            search_order_id = record.data.orderId;
            alert("orderId: "+search_order_id);
        }
        orderPaymentStore.load();

查了下百度之后,需要在load()的回调函数中实现自己的代码,才能执行操作

改造后:

search_order_txnNo = orderTxnNo.getValue();
        search_detail_order_id = "";
        search_order_payment_id = "";
        orderPaymentDetailStore.clearData();
        orderPaymentDetailStore.removeAll();
        //数据源加载,因为store是异步的,如果需要使用里面的数据,必须得在callback的回调函数里实现
        orderPaymentDetailStore.load({
            callback : function (records , options, success) {
                //获取当前数据源的数据量
                var count = orderPaymentDetailGrid.getStore().getCount();
                alert("加载回调事件:"+count);
                if(count > 0){
                    //var record = records.getSelectionModel().select(0,true);
                    //上面注释的代码无法有效执行,请忽略
                    var record = orderPaymentGrid.getStore().getAt(1);
                    search_order_id = record.data.orderId;
                    alert("orderId: "+search_order_id);
                }
                orderPaymentStore.load();
            }
        });

同时附加一段官方说明:

store.load({
    params: {start:0,limit:20},
    callback: function(records, options, success){
        Ext.Msg.alert('info', '加载完毕');
    },
    scope: store,
    add: true
});

1. params是在store加载时发送的附加参数。
2. callback是加载完毕时执行的回调函数，它包含3个参数：records参数表示获得的数据，options表示执行load()时传递的参数，success表示是否加载成功。
3. Scope用来指定回调函数执行时的作用域。
4. Add为true时，load()得到的数据会添加在原来的store数据的末尾，否则会先清除之前的数据，再将得到的数据添加到store中。