Ext js开发笔记
精度丢失,重写计算
由于js数字类型是浮点型导致计算值存在精度丢失情况
//减
function accSub(num1,num2){
var r1,r2,m;
try{
r1 = num1.toString().split('.')[1].length;
}catch(e){
r1 = 0;
}
try{
r2=num2.toString().split(".")[1].length;
}catch(e){
r2=0;
}
m=Math.pow(10,Math.max(r1,r2));
n=(r1>=r2)?r1:r2;
return (Math.round(num1*m-num2*m)/m).toFixed(n);
},
//乘
function accMul(value1, value2) {
if (value1 == 0 || value2 == 0 || value1 == null || value1 == '') {
return 0;
}
let m = 0;
let v1 = value1.toString();
let v2 = value2.toString();
m += v1.split(".")[1] ? v1.split(".")[1].length : 0;
m += v2.split(".")[1] ? v2.split(".")[1].length : 0;
let _v1 = Number(v1.replace(".", ""));
let _v2 = Number(v2.replace(".", ""));
return (_v1 * _v2) / Math.pow(10, m);
},
多个子页面全部打开时发现页面乱窜
如果没有打开可能是因为没有给itemId,导致自动生成的itemId重复,如果调用方法混乱,可能是起名一致
me.editWin = tp.Util.addContentTab({
itemId:'XXX'
})
折叠,拖动
//可折叠,可拖动
//方法1,添加折叠,拖动属性
collapsible: true,
split: true,
//必须通过点击展开按钮来展开区域,不加的情况下不点击按钮来展开有显示问题
floatable:false
//方法2,在两个组件之间添加一个拖动框(采用border布局时没法使用)
{xtype: 'splitter', width: 1},
悬浮提示框
form悬浮提示框
QuickTips使用后,在页面关闭时加上Ext.QuickTips.destroy(),不然会报错
listeners : {
// 鼠标移动到文本框显示悬浮框
render : function(field) {
Ext.QuickTips.init();
field.getEl().on('mouseover', function(p) {
Ext.QuickTips.init();
Ext.QuickTips.register({
target: field.el.id,
text: field.emptyText
});
});
}
}
grid悬浮提示框
,renderer: function(value, metaData, record, rowIdx, colIdx, store) {
metaData.tdAttr = 'data-qtip="' + value + '"';
return value;
}
是否选中
isSelected()需要Ext.selection.Model来调用,传入指定行的record或者行索引
me.editMng.down('#editMainGrid').getSelectionModel().isSelected(e.record)
绑定
暂时没有使用案例
grid禁用列排序
sortable:false
grid中combobox下拉显示值与真实值不一致
添加这条属性来使真实值与显示值保持一致
queryMode:'local'
combobox常见需求
//所选择的值限制在一个列表中的值
forceSelection:true
//不可输入
editable: false
//不可为空
allowBlank:false,
下拉框不与输入框保持宽度一致
会使用基础组件里设置的宽度
matchFieldWidth:false
滚动条下拉异常
在添加合计并且每页条数超过100会发生滚动条异常,为合计添加定位来规避这个问题
features: [{
ftype: 'summary',
dock: 'bottom'
}],
在控制器监听talpanel切换不同itemId的相同页面时,将页面切回来
在需要同时打开多个相同页面时(例如打开多个编辑窗口来编辑不同数据),需要手动赋值itemId,并且在切换tabpanel页的时候将当前控制器里的页面指针重新赋值(如果不手动赋值itemId会无法打开新页面,默认的itemId相同,相同itemId无法打开多个,由于在每次页面打开触发方法时会触发页面变量的赋值(例如me.showWin),所以需要再切换回去时重新赋值,不要使用获取页面的get方法来获取页面,无法获取到准确的页面)
me.showWin.on('beforeshow',function(a,b) {
me.showWin = a;
});
批量修改
搭配edit事件使用,页面选择框模式改为只能点击选择框触发(不然展开下来会导致选中行改变)
dealForEdit: function(editor, e) {
var me = this;
switch (e.field) {
case 'cjbz':
case 'jkbm':
var model = me.showWin.down('#withTowAddGrid').getSelectionModel();
var selects = model.getSelection();
if(selects.length > 0) {
if(model.isSelected(e.record)) {
Ext.each(selects,function(item) {
item.set(e.field,e.value);
})
}
}
break;
}
}
日历联动
一般用于起始时间和截止时间的联动,使插件的效果更加合理
//定义一个vtype
Ext.apply(Ext.form.field.VTypes, {
daterange: function (val, field) {
var date = field.parseDate(val);
if (!date) {
return false;
}
if (field.startDateField && (!this.dateRangeMax || (date.getTime() != this.dateRangeMax.getTime()))) {
var start = field.up('grid').down('#' + field.startDateField);
start.setMaxValue(date);
start.validate();
this.dateRangeMax = date;
}
else if (field.endDateField && (!this.dateRangeMin || (date.getTime() != this.dateRangeMin.getTime()))) {
var end = field.up('grid').down('#' + field.endDateField);
end.setMinValue(date);
end.validate();
this.dateRangeMin = date;
}
return true;
},
daterangeText: '开始日期必须小于结束日期'
Ext.tip.QuickTipManager.init();
//具体items写法
{
xtype: 'datefield',
fieldLabel: '时间范围 开始',
name: 'startdt',
id: 'startdt',
vtype: 'daterange',
endDateField: 'enddt',
format: 'Y-m-d',
width: 220,
labelWidth: 90,
msgTarget: 'side',
autoFitErrors: false
}, {
xtype: 'datefield',
fieldLabel: '结束',
name: 'enddt',
id: 'enddt',
vtype: 'daterange',
startDateField: 'startdt',
format: 'Y-m-d',
width: 170,
labelWidth: 40,
msgTarget: 'side',
autoFitErrors: false
},
});
文本框focus变长
//需添加参数
focusWidth : 120,
blurWidth : 60,
//监听事件
focus : function(field) {
field.getEl().animate({
to : {
width : field.focusWidth
},
listeners : {
afteranimate : function() {
field.setWidth(field.focusWidth);
//field.ownerCt.doLayout();
}
}
})
},
blur : function(field) {
if (field.getValue().length == 0)
field.getEl().animate({
to : {
width : field.blurWidth
},
listeners : {
afteranimate : function() {
field.setWidth(field.blurWidth);
//field.ownerCt.doLayout();
}
}
})
}
grid行拖拽
//添加插件
plugins: {
ptype: "gridviewdragdrop",
ddGroup: "DrapDropGroup"
}
多控制器
loadOtherController: function (controllerPath) {
var me = this;
Ext.syncRequire(tp.Const.application.getModuleClassName(controllerPath));
var ctrller = tp.Const.application.getController(controllerPath);
if (ctrller) {
ctrller.init();
}
},