作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
这里有很多面板,但我想使用函数为特定的item/panel
添加加载掩码。
之后,我将在另一个面板
中重用该函数,但此处仅更改参数。
Dysfunctional(url, postData, scope, successcallback,
callerFunctionName, responseType, httpMethod, failurecallback) {
Util.ShowLoadingMask();
if (!this.SessionExists()) {
return;
}
}
ShowLoadingMask: function() {
if (Util.ajaxCount == 0) {
new Ext.LoadMask(Ext.getBody(), {
msg: 'Please wait...'
}).show();
}
Util.ajaxCount++;
},
最佳答案
您可以在 ShowLoadingMask()
函数内部的 View 中传递 View ,并用于在传递的 View 上应用 mask ,如下所示
function ShowLoadingMask(view) {
view.LoadMask = new Ext.LoadMask(view.el, {
msg: 'Please wait...'
}).show();
}
在此FIDDLE ,我使用 ExtJS 组件创建了一个演示。我希望这将帮助/指导您实现您的要求。
代码片段
Ext.onReady(function() {
function ShowLoadingMask(view) {
view.LoadMask = new Ext.LoadMask(view.el, {
msg: 'Please wait...'
}).show();
}
function hideLoadingMask(view) {
view.el.unmask()
}
function createForm() {
return new Ext.FormPanel({
frame: true,
title: 'Load Mask Example',
bodyStyle: 'padding:10px;',
defaults: {
xtype: 'textfield',
anchor: '100%',
},
items: [{
fieldLabel: 'A'
}, {
fieldLabel: 'B'
}, {
fieldLabel: 'C'
}, {
xtype: 'combo',
fieldLabel: 'Combo 1',
store: new Ext.data.ArrayStore({
fields: ['text', 'value'],
data: [{
abbr: 'yes',
state: 'NO'
}]
}),
displayField: 'text',
valueField: 'text',
typeAhead: true,
queryMode: 'local'
}, {
xtype: 'combo',
fieldLabel: 'Combo 2',
store: new Ext.data.ArrayStore({
fields: ['text', 'value'],
data: [{
abbr: 'yes',
state: 'NO'
}]
}),
displayField: 'text',
valueField: 'text',
typeAhead: true,
queryMode: 'local'
}, {
xtype: 'datefield',
fieldLabel: 'date 1'
}, {
xtype: 'datefield',
fieldLabel: 'date 2'
}],
buttons: [{
text: 'Save'
}, {
text: 'Cancel'
}]
});
}
var panel = new Ext.Panel({
id: 'demopanel',
renderTo: Ext.getBody(),
items: [createForm(), createForm(), createForm()],
tbar: [{
text: 'Show Mask on All Form',
handler: function(btn) {
if (btn.getText() == 'Show Mask on All Form') {
Ext.getCmp('demopanel').items.items.forEach(function(item) {
ShowLoadingMask(item);
});
btn.setText('Hide Mask on All Form')
} else {
Ext.getCmp('demopanel').items.items.forEach(function(item) {
hideLoadingMask(item);
});
btn.setText('Show Mask on All Form')
}
}
}]
});
});
关于javascript - ExtJS 3.0 中更通用的面板加载掩码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49850901/
我是一名优秀的程序员,十分优秀!