0
我需要在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');
}
});
，这里是我的Tab平板代码
{
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开发者控制台，这是我在控制台上得到的错误
未捕获TypeError：无法读取undefined属性'setMasked'
你有没有试过在编号前加＃＃ 我的意思是'Ext.getCmp（'#ma inTabPanel'）' –
OK让我试试 –
，如果你使用的itemId代替编号 保持汽车是比较推荐的生成ID为组件 –