Ext.LoadMask

本文介绍如何利用Ext.LoadMask在JavaScript中为元素加载过程添加遮罩效果,提升用户体验。通过实例展示了与Ext.data.Store结合使用,实现数据加载与遮罩同步的效果。
Ext.LoadMask用于在加载数据时为元素做出类似于遮罩的效果。可以直接应用在元素上,如:

 var loadMarsk = new Ext.LoadMask(document.body//元素、DOM节点或id, {
msg : '正在删除数据,请稍候。。。。。。',
removeMask : true// 完成后移除
});
loadMarsk .show(); //显示


然后在处理完成的方法中loadMarsk .hide();

还可以和Ext.data.Store结合,可将效果与Store的加载达到同步,如:
var loadMarsk = new Ext.LoadMask(document.body, {
msg : '数据处理中!',
disabled : false,
store : store
});
Ext.define("StudentManagement.view.TrainingBatchGrid", { extend: "Ext.grid.Panel", alias: "widget.trainingbatchgrid", layout: "fit", columnLines: true, rowLines: true, isDblClick: false, forceFit: false, initComponent: function() { let me = this; me.deptId = me.app.getSelectedstudentrightgrid().deptId ; me.store = Ext.create("Ext.data.Store", { fields: ["code", "name", "alias", "description", "sortNumber"], autoLoad: true, proxy: { type: "ajax", url: SERVICE_URL + "training/setting/batch/list", extraParams: { start: null, limit: null, deptId: me.deptId }, reader: { type: "json", rootProperty: "data.data" } }, listeners: { load() { me.addEmptyRow("init"); } } }); me.columns = me.getColumns(); me.tbar = Ext.create("Ext.Toolbar", { items: [ { xtype: "label", style: "font-weight:normal;font-size: 18px;", text: "培训批次" }, "->", { xtype: "segmentedbutton", allowToggle: false, items: [ { xtype: "button", glyph: glyph.up, action: "up", handler: function() { me.moveItem(-1, me, "id"); } }, { xtype: "button", glyph: glyph.down, action: "down", handler: function() { me.moveItem(+1, me, "id"); } } ] }, { xtype: "button", glyph: glyph.add, handler: function() { me.addEmptyRow(); } }, { xtype: "button", glyph: glyph.trash_o, handler: function() { me.delRec(); } } ] }); me.cellediting = Ext.create("Ext.grid.plugin.CellEditing", { clicksToEdit: 2, autoCancel: false, listeners: { beforeedit: function(editor, context, eOpts) { if (context.field != "name" && Ext.isEmpty(context.record.get("name"))) { AimsUtils.windowAlert(me.up("window"), "请先填写批次名称!", 3); return false; } if (!["name", "userName"].includes(context.field) && Ext.isEmpty(context.record.get("userName"))) { AimsUtils.windowAlert(me.up("window"), "请填写招生负责人!", 3); return false; } return true; }, edit: function(editor, context) { let cellEdit = editor.getEditor(context.record, context.column).field; if (context.originalValue != context.value) { if (me.isSave(context.record)) { let gridSelec = context.record.data; let { id, name, userId, startDate, endDate } = gridSelec; let items = me.store.getData().items; let unique = items.find(item => item.get("id") != id && item.get("name") == name); if (unique) { AimsUtils.windowAlert(me.up("window"), "批次名称不能重复!", 3); return; } if (context.field == "startDate") { context.record.set("startDate", cellEdit.getRawValue()); endDate = new Date(startDate.getTime()); endDate.setFullYear(startDate.getFullYear() + 3); context.record.set("endDate", AimsUtils.dateFormat(endDate, "yyyy-MM-dd")); } let saveData = [ { id, name, userId, startDate, endDate, deptId: me.deptId, sortNumber: gridSelec.sortNumber || 1 } ]; if (!Ext.isEmpty(saveData[0].name) && !Ext.isEmpty(saveData[0].userId) && !Ext.isEmpty(saveData[0].startDate)) me.saveData(saveData, "POST", false); } } } } }); me.plugins = [me.cellediting]; me.callParent(); }, getColumns() { let me = this; let columns = [ { text: "批次名称", style: "text-align:center; color: darkgreen;", minWidth: 120, flex: 1, dataIndex: "name", editor: { xtype: "textfield", allowOnlyWhitespace: false } }, { text: "招生负责人", dataIndex: "userName", style: "text-align:center; color: darkgreen;", align: "left", editor: me.getNameEditor() }, { style: "text-align:center; color: darkgreen;", text: "开始时间", dataIndex: "startDate", width: 120, editor: { xtype: "datetimefield", format: "Y-m-d", editable: true } }, { style: "text-align:center;", text: "结束时间", dataIndex: "endDate", width: 120, editor: { xtype: "datetimefield", format: "Y-m-d", editable: true } } ]; return columns; }, addEmptyRow(status) { let me = this, store = me.getStore(), lastRec = store.last(), count = store.getCount(); // 为null 无记录时 let items = store.data.items; let add = true; if (items.length > 0) { for (let i = 0; i < items.length; i++) { let cont = items[i].data; if (!cont.id || cont.id.length != 32 || cont.id.includes("-")) { add = false; break; } } } if (Ext.isEmpty(lastRec) || me.isSave(lastRec)) { if (add) { let emptyData = {}, fields = store.getModel().getFields(); if (!Ext.isEmpty(fields)) { Ext.Array.forEach(fields, function(item, index) { emptyData[item.name] = null; }); } store.insert(count, emptyData); } } if (status == "init") { me.getSelectionModel().select(store.getCount() - 1); } }, isSave(rec) { let flag = true; let name = rec.get("name"); if (Ext.isEmpty(name)) { flag = false; } return flag; }, saveData(data, type, sortFlag) { let me = this; me.loadMask = new Ext.LoadMask({ msg: "保存中...", target: me }); me.loadMask.show(); Ext.Ajax.request({ url: SERVICE_URL + "training/setting/batch", method: type, scope: me, params: Ext.encode(data), success: function(response) { let responseData = Ext.decode(response.responseText); if (responseData.success == true) { if (sortFlag) { me.down("[action=up]").enable(); me.down("[action=down]").enable(); } else { AimsUtils.windowAlert(me.up("window"), "保存成功!", 4); let { id, sortNumber } = responseData.data[0]; me.getSelection()[0].set({ id, sortNumber }); me.getSelection()[0].commit(); me.addEmptyRow(); } me.loadMask.hide(); } }, failure: function(response, options) { let alertMessage = ""; if (sortFlag) { alertMessage = "排序失败!"; } else { alertMessage = "保存失败!"; } AimsUtils.windowAlert(me.up("window"), alertMessage, 3); me.loadMask.hide(); } }); }, delRec() { let me = this, store = me.getStore(), selRec = me.getSelection()[0]; if (Ext.isEmpty(selRec)) { AimsUtils.windowAlert(me.up("window"), "请选择要删除的记录!", 3); return; } let id = selRec.get("id"); if (Ext.isEmpty(id) || id.length != 32) { store.remove(selRec); } else { CommonComp.showConfirmWindow( me.app.application.vueNode, { remark: "确定删除吗?" }, () => { Ext.Ajax.request({ url: SERVICE_URL + `training/setting/batch/${id}`, method: "DELETE", scope: me, success: function(response) { let responseData = Ext.decode(response.responseText); if (responseData.success == true) { store.remove(selRec); } }, failure: function(response, options) { AimsUtils.windowAlert(me.up("window"), "删除失败!", 3); } }); } ); } }, getNameEditor: function() { let me = this; let url = `training/setting/teacher/list`; return { completeOnEnter: false, // 不触发Ext.Editor 的 onSpecialKey field: { xtype: "comboboxgridtree", pickerConfig: { width: 380, height: 300 }, valueField: "userName", displayField: "userName", rightColumnDataIndex: "userName", queryDelay: 100, leftCompConfig: { columns: [ { text: "姓名", style: "text-align: center;", textAlign: "start", minWidth: 70, flex: 1, dataIndex: "userName" }, { text: "性别", style: "text-align: center;", textAlign: "start", width: 60, dataIndex: "gender" } ], store: Ext.create("Ext.data.Store", { fields: ["userId", "userName", "gender"], pageSize: 10, autoLoad: false, proxy: { type: "ajax", url: SERVICE_URL + url, extraParams: { eliminateIds: [] }, reader: { type: "json", rootProperty: "data.data", totalProperty: "data.totalCount" } } }) }, matchFieldWidth: false, pageSize: 10, focusOnExpand: true, itemClickCb(rec) { let selRec = me.getSelection(); if (selRec.length > 0) { selRec[0].set("userId", rec.get("userId")); selRec[0].set("userName", rec.get("userName")); } } } }; }, // grid 移动排序 (调换排序号) moveItem(flag, _grid, idKey = "id") { let me = this, store = _grid.getStore(), count = store.getCount(), selMode = _grid.getSelectionModel(), selRec = selMode.getSelection()[0], selIndex, // 移动之后的数据index currIndex, tempRec, newRec, data = []; if (Ext.isEmpty(selRec)) { AimsUtils.windowAlert(me.up("window"), "请选择要排序的记录!", 3); return; } if (_grid.cellediting == null || !_grid.cellediting.editing) { let selCode = selRec.get(idKey); if (!Ext.isEmpty(selCode) && selCode.length === 32) { currIndex = store.indexOf(selRec); let currSortNumber = selRec.get("sortNumber"); selIndex = currIndex + flag; data[0] = { id: selCode, name: selRec.get("name"), sortNumber: null }; // 如果最后一行是空行 不参与排序 let last = store.getAt(count - 1); if (Ext.isEmpty(last.get(idKey)) || last.get(idKey).length != 32) { count = count - 1; } if (selIndex === count) { AimsUtils.windowAlert(me.up("window"), "已移动到最后一条记录!", 3); return; } else if (selIndex === -1) { AimsUtils.windowAlert(me.up("window"), "已移动到第一条记录!", 3); return; } tempRec = selRec; store.removeAt(currIndex); newRec = store.insert(selIndex, tempRec); selMode.select(newRec); // 定位到移动后的那一行 _grid.getView().focusRow(newRec[0]); let moveRec = store.getAt(currIndex); let moveSortNumber = moveRec.get("sortNumber"); data[0].sortNumber = moveSortNumber; data[1] = { id: moveRec.get(idKey), name: moveRec.get("name"), sortNumber: currSortNumber }; newRec[0].set({ sortNumber: moveSortNumber }); moveRec.set({ sortNumber: currSortNumber }); me.saveData(data, "POST", true); } } else { AimsUtils.windowAlert(me.up("window"), "当前行记录正在编辑,请编辑完成后移动!", 3); } } }); 1.培训批次结束时间默认3年,开始日期是2025年7月1号 结束日期应该是"2026-12-31",开始日期的前一天。2.允许修改结束时间,
最新发布
07-15
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值