如何在存储加载之前向面板添加遮罩，并在存储加载后删除
How to add a mask to a panel before the store loads and remove after the store loads
我需要在 sencha 中的选项卡面板中添加一个加载掩码，我有一个通过控制器中的 Ajax 请求加载的商店，但在存储加载之前，我需要放置一个加载掩码，并且在加载存储后，我需要删除它。这是我到目前为止的代码
我的控制器
Ext.define('QvidiApp.controller.MyController', {
extend: 'Ext.app.Controller',
config: {
},
beforeLoad: function() {
Ext.Ajax.on('beforeLoad', function (con, opt) {
Ext.getCmp('mainTabPanel').setMasked({
xtype: 'loadmask',
message: 'Loading...',
indicator:true
});
}, this);
},
getGender: function() {
Ext.Ajax.request({
method: 'POST',
timeout: 25000,
disableCaching : true,
useDefaultHeader : true,
params: {
class: 'Qvidi',
method: 'getDataM'
},
url: 'server/index.php',
success: function( response ){
var r = Ext.decode( response.responseText );
Ext.getStore('GenderStore').setData( r.results );
}
});
Ext.getCmp('mainTabPanel').setMasked(false);
},
afterLoad: function() {
Ext.getCmp('mainTabPanel').setMasked(false);
},
init: function(application) {
QvidiApp.app.getController('MyController').beforeLoad();
QvidiApp.app.getController('MyController').getGender();
QvidiApp.app.getController('MyController').afterLoad();
console.log('loaded');
}
});
这是我的标签面板代码
{
xtype: 'tabpanel',
id: 'mainTabPanel',
ui: 'light',
layout: {
type: 'card',
animation: 'scroll'
},
items: [
{
xtype: 'container',
title: 'Welcome',
iconCls: 'home',
id: 'welcomeTab',
items: [
{
xtype: 'image',
centered: true,
height: 85,
width: 318,
src: 'http://104.155.111.158/qvidim/PowerdbyNfinity.png'
}
]
},
{
xtype: 'container',
title: 'Data',
iconCls: 'organize',
items: [
{
xtype: 'dataview',
height: 465,
id: 'dataview',
masked: true,
itemTpl: [
' <tpl>',
' <table style="width: 100%;">',
' <tr>',
' <td><div style="width:5em; text-align: left">{gender}</div></td>',
' <td><div style="width:5em; text-align: left">{glances} </div></td>',
' <td><div style="width:5em; text-overflow: ellipsis; display: block; overflow: hidden; text-align: left">{title}</div></td>',
' </tr> ',
' </table>',
' <hr>',
' </tpl>'
],
store: 'QvidiDataStore'
}
]
},
{
xtype: 'container',
title: 'PieChart',
iconCls: 'info',
layout: 'fit',
scrollable: 'vertical',
items: [
{
xtype: 'polar',
id: 'genderPieChart',
colors: [
'#115fa6',
'#94ae0a',
'#a61120',
'#ff8809',
'#ffd13e',
'#a61187',
'#24ad9a',
'#7c7474',
'#a66111'
],
store: 'GenderStore',
series: [
{
type: 'pie',
labelField: 'types',
xField: 'counter'
}
],
interactions: [
{
type: 'rotate'
}
]
}
]
},
{
xtype: 'container',
title: 'BarChart',
iconCls: 'info',
scrollable: 'vertical',
items: [
{
xtype: 'chart',
centered: true,
height: 374,
colors: [
'#24ad9a',
'#7c7474',
'#a66111'
],
store: 'ClipsViewed',
axes: [
{
type: 'category',
fields: [
'title'
]
},
{
type: 'numeric',
fields: [
'viewed'
],
grid: {
odd: {
fill: '#e8e8e8'
}
},
position: 'left'
}
],
series: [
{
type: 'bar',
style: {
minGapWidth: 1,
minBarWidth: 80,
maxBarWidth: 80
},
xField: 'title',
yField: [
'viewed',
'glances'
]
}
],
interactions: [
{
type: 'panzoom'
}
]
}
]
},
{
xtype: 'container',
title: 'ClipsGenderChart',
iconCls: 'info',
scrollable: 'vertical',
items: [
{
xtype: 'chart',
centered: true,
height: 378,
colors: [
'#ff8809',
'#7c7474'
],
store: 'ClipsGenderStore',
axes: [
{
type: 'category',
fields: [
'title'
]
},
{
type: 'numeric',
fields: [
'male'
],
grid: {
odd: {
fill: '#e8e8e8'
}
},
position: 'left'
}
],
series: [
{
type: 'bar',
style: {
minGapWidth: 1,
minBarWidth: 80,
maxBarWidth: 80
},
xField: 'title',
yField: [
'male',
'female'
]
}
],
interactions: [
{
type: 'panzoom'
}
]
}
]
}
],
tabBar: {
docked: 'bottom',
ui: 'light'
}
}
我不知道为什么这不起作用，我在Chrome开发人员控制台中对其进行了测试，这是我在控制台上遇到的错误
未捕获的类型错误：无法读取未定义的属性"setMasked"
你的代码没有真正的意义。 此示例必须有效。如果您有什么不清楚的地方，请在评论中询问
控制器
Ext.define('QvidiApp.controller.MyController', {
extend: 'Ext.app.Controller',
init: function(application) {
this.control({
"#genderPieChart": {
afterrender: this.loadPieChartStore
}
});
}
loadPieChartStore: function(component) {
var tabPanel = component.up("tabPanel[id=mainTabPanel]");
tabPanel.setMasked({
xtype: 'loadmask',
message: 'Loading...',
indicator:true
});
Ext.Ajax.request({
method: 'POST',
timeout: 25000,
disableCaching : true,
useDefaultHeader : true,
params: {
class: 'Qvidi',
method: 'getDataM'
},
url: 'server/index.php',
success: function( response ){
var r = Ext.decode( response.responseText );
Ext.getStore('GenderStore').setData( r.results );
tabPanel.setMasked(false);
console.log('loaded');
},
failure:function(){
tabPanel.setMasked(false);
}
});
},
});
视图
{
xtype: 'container',
title: 'PieChart',
iconCls: 'info',
layout: 'fit',
scrollable: 'vertical',
items: [
{
xtype: 'polar',
itemId: 'genderPieChart',
colors: [
'#115fa6',
'#94ae0a',
'#a61120',
'#ff8809',
'#ffd13e',
'#a61187',
'#24ad9a',
'#7c7474',
'#a66111'
],
store: 'GenderStore',
series: [
{
type: 'pie',
labelField: 'types',
xField: 'counter'
}
],
interactions: [
{
type: 'rotate'
}
]
}
]
}
您应该能够使用 beforeload 和 load 事件侦听器来设置和重置掩码，如以下示例所示
var store = Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
autoLoad: false,
fields: ['id', 'name'],
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
},
listeners: {
beforeload: function(store, eOpts) {
// You may want to get panel reference dynamically
panel.mask("loading...");
},
load: function(store, eOpts) {
// You may want to get panel reference dynamically
panel.unmask();
}
}
});
var panel = Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: store,
columns: [{
text: 'Id',
dataIndex: 'id',
flex: 1
}, {
text: 'Name',
dataIndex: 'name',
flex: 1
}],
height: 200,
width: 400,
renderTo: Ext.getBody()
});
Ext.create('Ext.button.Button', {
text: 'Load Data',
renderTo: Ext.getBody(),
handler: function() {
store.load();
}
});
相关文章：
- 加载存储在IndexedDB中的HTML页面
- 在webView上加载本地存储的文件时延迟
- 将图像从本地存储加载到画布仅每秒刷新一次
- ExtJS :: 存储加载数据方法优化
- 将图像从表单保存到本地存储并存储/加载它
- 如何在存储加载之前向面板添加遮罩，并在存储加载后删除
- 将文本文件从手机存储加载到 HTML 文本区域
- 如何使用 html5 本地存储加载值
- ExtJs 4.2， 网格中继来自存储加载事件的事件导致未捕获的类型错误: 未定义不是一个函数
- Sencha touch 2-自定义组件开发数据项未从存储加载值
- 使用javascript从JSON文件中搜索并从本地存储加载
- 更改从存储加载选项的下拉dojo的字体大小
- 如何在ExtJS 4中将存储加载到组合框时发送额外的参数
- Backbonejs fullcalendar v2从本地存储加载事件
- 如果代理遇到异常，ExtJS 4.0将取消存储加载
- 从本地存储加载图像并保留它
- 如何防止从本地存储加载样式表时呈现css
- ExtJs:等待直到存储加载，然后执行next语句
- 从 Web 存储加载包含 HTML 的页面
- 从localStorage存储/加载修改后的HTML5页面
