Extjs6 多选远程下拉带全选全不选功能_extjs远程下拉-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_20952737/article/details/135087229

本文描述了作者创建的一个半自动的网上产品选择组件，使用ExtJS库，通过Ajax请求远程数据，并实现多选功能，同时包含授权和事件监听逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

网上找了不少例子感觉都不满足需要，于是参照别人的案例自己写了一个半自动的案例，虽然不够智能，但是个人感觉还行

{
    fieldLabel : 'Product',
    emptyText : '--- Select ---',
    xtype : 'combo',
    name: 'product[]',
    mode : 'remote',
    pageSize: 100,
    multiSelect: true,
    store : Ext.create('Ext.data.Store', {
        fields: [
            { name:"id" },
            { name:"id_name" }
        ],
        pageSize: 100,
        proxy: {
            type: 'ajax',
            url: server + '/product',
            reader: {
                type: 'json',
                rootProperty: 'items'
            }
        },
        listeners: {
            beforeload: function (store) {
                store.getProxy().setHeaders({Authorization: storage.get('token')});
            },
            load: function (store) {
                //添加All选项
                store.insert(0,[{ id: "All",id_name: "All" }]);
            }
        }
    }),
    displayField : 'id_name',
    valueField : 'id',
    matchFieldWidth: false,
    enableKeyEvents: true,
    listConfig: {
        minWidth: 240,
        itemTpl: Ext.create('Ext.XTemplate', '<input type=checkbox>{[values.id_name]}'),
        onItemSelect: function (record) {
            var node = this.getNode(record);
            if (node) {
                Ext.fly(node).addCls(this.selectedItemCls);
                var checkboxs = node.getElementsByTagName("input");
                if (checkboxs != null) var checkbox = checkboxs[0];
                checkbox.checked = true;
            }
        },
        listeners: {
            itemclick: function (view, record, item, index, e, eOpts) {
                //All为store.insert中配置的valueField属性对应的值
                var nodes = this.getNodes(record.store.data.items);
                var check_boxs = [];
                Ext.each(nodes, function(item) {
                    var check_box = item.getElementsByTagName("input");
                    check_boxs.push(check_box[0]);
                });
                if(!index){
                    var value = view.ownerCmp.getValue();
                    var dex = value?view.ownerCmp.getValue().indexOf('All'):-1;
                    if(dex >= 0){
                        Ext.each(check_boxs, function(item) {
                            item.checked = false;
                        });
                        view.ownerCmp.setValue('All');
                    }else{
                        Ext.each(check_boxs, function(item) {
                            item.checked = true;
                        });
                        var newValues = [];
                        Ext.each(record.store.data.items, function(item) {
                            //此处为valueField对应的属性
                            if(item.data.id != 'All') {
                                newValues.push(item.data.id);
                            }
                        });
                        view.ownerCmp.setValue(newValues);
                    }
                }else{
                    var isSelected = view.isSelected(item);
                    var checkboxs = item.getElementsByTagName("input");
                    var checkbox = checkboxs[0];
                    if (!isSelected) {
                        checkbox.checked = true;
                    } else {
                        checkbox.checked = false;
                    }
                }
            }
        }
    }
}