Extjs4学习笔记（七）----combobox下拉动态树

combobox下拉动态树

主要自定义js文件

/**
 * 下拉树
 */
 Ext.define('TeaComboTreeBox', {
    extend: 'Ext.form.field.ComboBox',
    multiSelect: false,  //控制单选,多选
    fieldLabel: '责 任 班 组',
    emptyText: '--请选择班组--',
    displayField: 'text',
    valueField: 'text',
    createPicker: function () {
        var me = this;
        var store = Ext.create('Ext.data.TreeStore', {
            proxy: {
                type: 'ajax',
                url: 'getFirstBm.action'
            },
            folderSort: false,
            autoLoad:true
        });

        store.load();
        var picker = Ext.create('Ext.tree.Panel', {

            store: store,
            listeners: {/*
            afteritemexpand:function(node,index,item,eOpts){
                node.removeAll();
                console.log(node.raw.code);
                Ext.Ajax.request({
                    url:'getSecondData.action',
                    params:{
                        code:node.raw.code
                    },
                    success:function(responce){
                        console.log(responce.responseText);
                        node.appendChild(eval("("+responce.responseText+")")); 
                    }
                })
                }
            */},
            rootVisible: false,
            selModel: {
                mode: me.multiSelect ? 'SIMPLE' : 'SINGLE'
            },
            floating: true,
            hidden: true,
            focusOnToFront: false
        });
        me.mon(picker, {
            itemclick: me.onItemClick,
            refresh: me.onListRefresh,
            scope: me
        });

        me.mon(picker.getSelectionModel(), {
            beforeselect: me.onBeforeSelect,
            beforedeselect: me.onBeforeDeselect,
            selectionchange: me.onListSelectionChange,
            scope: me
        });
        this.picker = picker;
        return picker;
    }
});

在其他js中调用自定义动态树代码

var combotree = Ext.create('TeaComboTreeBox', {
        multiSelect: true,//可实现多选
        labelWidth: 70,
        id: 'wz_zrbz',
        anchor: '96%'
    });

后台：在service层代码

@Override
    public List<Map<String, Object>> getFirstBm() {
        List<Map<String, Object>> list = wzdjDao.getFirstBm();
        getNextLevels(list);
        return list;
    }

    //递归调用查找所有孩子
    private void getNextLevels(List<Map<String, Object>> tempList) {
        for (Map<String, Object> map : tempList) {
            if (map.get("leaf").equals("false")) {
                List<Map<String, Object>> nextData = wzdjDao.getSecondData((String)map.get("code"));
                getNextLevels(nextData);
                map.put("children",nextData);
            }
        }

    }

首先，先获取父层数据

List<Map<String, Object>> list = wzdjDao.getFirstBm(); 然后，根据递归将孩子数据得到传到前台。
效果图如下