我的商店需要时间来加载。所以我想在加载商店数据时显示加载指示器。是否有任何功能可以知道列表存储是否已完全加载? 请帮帮我..我正在寻找这么长时间..
这是我的代码:
Ext.Viewport.setMasked({
xtype: 'loadmask',
message: 'Loading'
});
Ext.define('MyApp.view.Myview1',
{
extend: 'Ext.Panel',
requires: ['Ext.List', 'Ext.util.JSON'],
config: {
layout: 'hbox',
items: [
{
xtype: 'panel',
layout: 'fit',
flex: 1,
items: [
{
xtype: 'list',
itemTpl:
'<div class="myContent">' +
'<div>{name}</div>' +
'</div>',
store: 'MainStore',
disclosure: true,
store.on({
load: {
fn: function( store ) {
Ext.Viewport.setMasked(false);
},
scope: this,
single: true
}
});
store.load();
}
]
}
]
}
});
我的要求是在从商店加载数据时显示指示符,并在列表包含商店中的所有数据后将其删除。
答案 0 :(得分:0)
您必须将load事件绑定到此商店,如下面的代码
Ext.Viewport.setMasked({
xtype: 'loadmask',
message: 'Loading'
});
store.on({
load: {
fn: function( store ) {
Ext.Viewport.setMasked(false);
},
scope: this,
single: true
}
});
store.load();
答案 1 :(得分:0)
这个很简单,就像@Naresh Said
一样将加载掩码放在你的函数中
Ext.Viewport.setMasked({
xtype: 'loadmask',
message: 'Please Wait...'
});
并在存储加载后禁用loadmask
storectn.load({
callback: function (records, operation, success, response) {
if (success==1) {
// Ext.Msg.alert('success');
Ext.Viewport.setMasked(false);
} else {
// Ext.Msg.alert('Failed');
Ext.Viewport.setMasked(false);
}
}
});
答案 2 :(得分:0)
最后我解决了问题:)
Sencha在很短的时间内加载商店和列表,但UI需要很长时间才能加载。因此,如果您使用setTimeout设置回调以删除指标,则在完成加载商店之后,问题将得到解决。因为当UI加载完成时,它将调用您的最终方法,因为JavaScript是单线程语言。
Ext.Viewport.setMasked({
xtype: 'loadmask',
message: 'Loading'
});
store.on({
load: {
fn: function( store ) {
setTimeout(function(){
Ext.Viewport.setMasked(false);
}, 100);
},
scope: this,
single: true
}
});
store.load();
这里即使setTimeout应该在100毫秒后被调用,它将等待首先加载UI然后被调用。
如果您通过带有store.add(Record)的自定义查询动态加载商店,则在加载所有数据后,您只需调用setTimeout调用。它也会起作用。
答案 3 :(得分:0)
我们需要在sencha touch中加载数据时设置掩码(阻止用户交互并显示加载消息)。 Sencha touch setMasked(&lt;&gt;)提供了将掩码添加到容器中的选项。但每次我们需要手动添加蒙版并移除蒙版。即时手动操作,我们可以使用商店听众。
我的要求是我有一个CRUD流程商店。因此,每当我尝试同步和加载数据时,我想要设置视图的掩码。我的商店代码如下所示。
我为此任务使用了beforeload,beforesync,load,metachange,removerecords,updaterecord,write,addrecords事件。
点击链接,请访问以下网址获取完整源代码。 [解决方案]