Ext js开发笔记

Ext js开发笔记

demo

Ext 4 中文Api

Ext 6.5 英文Api

精度丢失，重写计算

由于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();
            }
        },