我需要在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开发者控制台中进行了测试，这是我在控制台上遇到的错误
未捕获的TypeError：无法读取未定义的属性'setMasked'
答案 0 :(得分：1)
你的代码真的没有意义。这个例子必须有效。如果你有任何不清楚的地方请评论
控制器
public ButtonPanel(Animator animator) {
super();
//this.animator = animator;
//setLayout(new BoxLayout(this, BoxLayout.PAGE_AXIS));
buttonRow = new JPanel();
buttonRow.setLayout(new BoxLayout(buttonRow, BoxLayout.PAGE_AXIS));
buttonRow.setBackground(Color.CYAN);
this.setBackground(Color.CYAN);
button1 = new JButton("Start Animation");
button1.addActionListener(new QuitHandler());
button1.setBackground(Color.CYAN);
button1.setForeground(Color.blue);
buttonRow.add(button1);
button2 = new JButton("Move Box");
button2.addActionListener(new QuitHandler());
button2.setBackground(Color.CYAN);
button2.setForeground(Color.blue);
button2.setOpaque(true);
buttonRow.add(button2);
String[] bookTitles = new String[] {"Effective Java", "Head First Java",
"Thinking in Java", "Java for Dummies"};
JComboBox<String> bookList = new JComboBox<>(bookTitles);
//add to the parent container (e.g. a JFrame):
buttonRow.add(bookList);
//get the selected item:
String selectedBook = (String) bookList.getSelectedItem();
System.out.println("You seleted the book: " + selectedBook);
//Adds all rows
add(buttonRow);
setVisible(true);
}
查看
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);
}
});
},
});
答案 1 :(得分：0)
您应该能够使用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();
}
});