ExtJS4.2.1使用技巧。

重要提示

  • trigger 字段内 Ext.window.Window border布局禁止将items内Grid或Tree的创建放到 onTriggerClick 之外。

  • Dialog Border 布局中不要将 Panel 的创建放到 initComponent 之外（可通过 getCmp 获取）。

1. 通过ID获取DOM，其中 mb2 为ID名称：

1
2
3
Ext.get('mb2').on('click', function(e){
    ...
});

2. Grid actioncolumn handler 列参数：

1
2
3
4
5
6
7
8
{
    xtype: "actioncolumn",
    items: [{
        icon: "Public/Images/icons/approval.png",
        handler: function(view, rowIndex, colIndex, item, e, record){},
        scope: me
    }],
}

3. Grid 右键菜单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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());
        }
    }
});

4. 多附件上传

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{
    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]);
            }
            ...
        }
    },
}

5. Numberfield

监听事件 

1
2
3
4
5
6
7
8
{
    xtype: 'numberfield',
    listeners: {
        change:function(field, newVal, oldVal){
            ...
        },
    },
}

显示格式 

1
2
3
{
    format:'0.0000',
}

编辑小数位 

1
2
3
4
5
6
{
    editor: {
        xtype: "numberfield",
        decimalPrecision: 4
    }
}

6. Form 字段 placeholder属性

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

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

1
2
# 添加属性至Ext.grid.Panel中
onLockedViewScroll: Ext.emptyFn,

8. Tree 选中节点

1
2
3
var grid = ...;
var node = grid.getStore().getNodeById('id');
grid.getSelectionModel().select(node);

9. Grid 单击事件

1
2
3
4
5
6
7
Ext.create("Ext.grid.Panel", {
    listeners: {
        click: function (grid, dom, cellIndex, colIndex, tr, record) {
            // ...
        }
    }
});

10. Combo|Combobox 绑定 Store

1
2
3
4
5
var field = Ext.getCmp('XXX');
field.bindStore(Ext.create("Ext.data.ArrayStore", {
    fields: ["id", "name"],
    data: []
}));

11. 禁用分页参数

1
2
3
4
proxy: {
    getParams: Ext.emptyFn,
    ...
}

12. 下拉框数据远程获取

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
    xtype: 'combobox',
    queryMode: "remote",
    editable: false,
    valueField: "value",
    displayField: "label",
    store: Ext.create('Ext.data.Store', {
        fields: [
            {name: 'label', type: 'string'},
            {name: 'value', type: 'string'}
        ],
        data: [],
        proxy: {
            type: 'ajax',
            url: '',
            getParams: Ext.emptyFn
        }
    })
}

13. form field 字段鼠标悬浮提示

1
2
3
4
5
{
    ...
    inputAttrTpl: " data-qtip='This is my quick tip!' ",
    ...
}

14. Grid 标题动态更新

1
2
3
4
5
6
7
8
var columns = me.getGoodsGrid().getView().getHeaderCt().getGridColumns();
Ext.each(columns, function (col) {
    if (col.text === "备料数量") {
        col.setText("出库数量");
    } else if (col.text === '已出库数量') {
        col.setVisible(false);
    }
});

15. Ext.window.Window 组件 buttons 获取 items 下的 form 组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Ext.create("Ext.window.Window", {
    ...
    items: Ext.widget("form", {
        items: [
            ...
        ],
    }),
    buttons: [{
        text: '提交',
        handler: function () {
            var thisForm = this.up("window").down("form").getForm();
            if (thisForm.isValid()) {
                ...
            }
        }
    }]
});

16. Tree select 事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Ext.create('Ext.tree.Panel', {
    store: store,
    border: 0,
    flex: 1,
    rootVisible: false,
    useArrows: true,
    listeners: {
        select: {
            fn: function (rowModel, record) {
                // 判断节点是否已经展开，没有则展开
                if (!record.isExpanded()) {
                    record.expand();
                }
            },
            scope: me
        }
    }
});

17. combobox 多选 picker 实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
{
    xtype: 'combobox',
    name: 'type',
    fieldLabel: '更改类别',
    labelAlign: "right",
    labelSeparator: "",
    labelWidth: 80,
    editable: false,
    margin: "5, 0, 0, 0",
    multiSelect: true,
    createPicker: function () {
        var self = this;
        var store = new Ext.data.TreeStore({
            fields: ['id', 'text'],
            autoLoad: true,
            autoDestroy: true,
            proxy: {
                type: 'ajax',
                actionMethods: {
                    read: 'POST'
                },
                url: me.URL('xxx/xx/xx')
            },
            root: {
                expanded: true,
                children: []
            },
            listeners: {
                beforeload: function (store, eOpts) {
                    self.getEl().mask("加载中...");
                },
                load: function (store, eOpts) {
                    self.getEl().unmask();
                }
            }
        });
        var picker = new Ext.tree.Panel({
            xtype: 'check-tree',
            width: 100,
            height: 'auto',
            store: store,
            pickerField: self,
            rootVisible: false,
            floating: true,
            hidden: true,
            checkable: true,
            checkModel: 'cascade',
            triggerOnClick: true,
            viewConfig: {
                focusOnToFront: true
            },
            border: 0,
            cls: 'PSI-Msgbx-tip',
            listeners: {
                scope: self,
                itemclick: function (view, record, node, rowIndex, e) {
                    record.set('checked', !record.get('checked'));

                    // 获取当前选中的所有节点
                    var checkedNodes = picker.getChecked(),
                        nodeTexts = [];
                    Ext.Array.each(checkedNodes, function(node) {
                        nodeTexts.push(node.get('text'));
                    });

                    // 设置combobox的值为所有选中节点的文本
                    self.setValue(nodeTexts.join(', '));
                }
            },
            buttons: [{
                text: '确定',
                handler: function() {
                    self.collapse();
                }
            }]
        });

        self.mon(picker, {
            show: function () {
                store.load();
            },
            afteritemexpand: self.alignPicker,
            afteritemcollapse: self.alignPicker,
            scope: self
        });

        return picker;
    }
}

18. 动态添加Grid列

1
2
3
4
5
6
7
8
9
10
var gridView = me.getMainGrid();
var store = gridView.getStore();
var fields = [];
store.model.getFields().map(function (item) { fields.push(item.name) });
for (var i = 0; i < newColumns.length; i++) {
    gridView.headerCt.insert(gridView.columns.length, Ext.create('Ext.grid.column.Column', newColumns[i]));
    fields.push(newColumns[i].dataIndex);
}
store.model.setFields(fields, null, null);
gridView.getView().refresh();