Posted in: JavaScript

Ext JS 4.2.1使用技巧

1. Grid actioncolumn handler 列参数:

{
    xtype: "actioncolumn",
    items: [{
        icon: "Public/Images/icons/approval.png",
        handler: function(view, rowIndex, colIndex, item, e, record){},
        scope: me
    }],
}

2. Grid 右键菜单

var contextMenu = Ext.create('Ext.menu.Menu', {
    width: 100,
    items: [{
        text: 'Menu_1',
        iconCls: "PSI-button-insertBefore",
        handler: function() {
          alert(1);
        }
    }]
});

var grid = Ext.create("Ext.tree.Panel", {
    listeners: {
        itemcontextmenu: function (grid, record, item, index, e) {
            e.stopEvent();
            contextMenu.showAt(e.getXY());
        }
    }
});

3. 多附件上传

{
    xtype: 'filefield',
    listeners: {
        afterrender:function(fb){
            fb.fileInputEl.set({
                multiple: 'multiple'
            });
        },
        change: function (fb, v) {
            var formData = new FormData();
            var files = fb.fileInputEl.dom.files;
            for (var i = 0; i < files.length; i++) {
                formData.append('file[]', files[i]);
            }
            ...
        }
    },
}

4. Numberfield 监听事件

{
    xtype: 'numberfield',
    minValue: 0,
    listeners: {
        change:function(field, newVal, oldVal){
            ...
        },
    },
}

5. Form 字段 placeholder属性

{
    xtype: 'textfield',
    emptyText: '这里输入placeholder属性值'
}

6. Grid列锁定后鼠标上下滚动困难

# 添加属性至Ext.grid.Panel中

onLockedViewScroll: Ext.emptyFn,

发表评论

电子邮件地址不会被公开。 必填项已用*标注