如何在商店加载前向面板添加遮罩并在商店加载后移除
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();
}
});
我需要在 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();
}
});