extjs6 treepicker 下拉树

model定义：

Ext.define('permissionModel', {
    extend: 'Ext.data.TreeModel',
    idProperty:'Id',
    fields: [
        {
            name: 'ControllerName',
            mapping: function (data) {
                if (data.attributes) {
                    return data.attributes.controll;
                } else {
                    return data.ControllerName;
                }
            }
        }, {
            name: 'ActionName',
            mapping: function (data) {
                if (data.attributes) {
                    return data.attributes.act;
                } else {
                    return data.ActionName;
                }
            }
        },{
            name:'RoutePath',
            mapping:function(data){
                if(data.attributes){
                    return '';
                }else{
                    return data.RoutePath;
                }
            }
        },{
            name:'Type',
            mapping:function(data){
                if(data.attributes){
                    return data.attributes.type;
                }else{
                    return data.Type;
                }
            }
        },{
            name:'CommandLine',
            mapping:function(data){
                if(data.attributes){
                    return data.attributes.cmdline;
                }else{
                    return data.CommandLine;
                }
            }
        },{
            name:'IsNewWindow',
            mapping:function(data){
                if(data.attributes){
                    return data.attributes.newwin;
                }else{
                    return data.IsNewWindow;
                }
            }
        },{
            name:'Remark',
            mapping:function (data) {
                if(data.attributes){
                    return data.attributes.remark;
                }else{
                    return data.Remark;
                }
              }
        },{
            name:'OrderNumber',
            mapping:function (data) {
                if(data.attributes){
                    return data.attributes.order;
                }else{
                    return data.OrderNumber;
                }
              }
        },
        {
            name: 'Id',
            mapping: function(data){
                if(data.attributes){
                    return data.id;
                }else{
                    return data.ID;
                }
            }
        }, {
            name: 'FartherId',
            mapping: function(data){
                if(data.attributes){
                    if (data.attributes.fartherId != null) {
                        return data.attributes.fartherId;
                    } else {
                        return '';
                    }
                }else{
                    return data.FartherId;
                }
            }
        }, {
            name: 'Name',
            mapping: function(data){
                if(data.attributes){
                    return data.text;
                }else{
                    return data.Name;
                }
            }
        }, {
            name: 'leaf',
            mapping: function (data) {
                if (data.children == null) {
                    return true;
                } else {
                    return false;
                }
            }
        },{
            name:'Icon',
            mapping: function (data) {
                if(data.attributes!=null){
                    return data.iconCls;
                }else{
                    return data.Icon;
                }
             }
        }
    ]
});

store定义：

Ext.define('permissionStore', {
    extend: 'Ext.data.TreeStore',
    defaultRootId: '',
    model: 'permissionModel',
    parentIdProperty: 'FartherId',
    sorters: [{ property: 'OrderNumber', direction: 'ASC' }],
    proxy: {
        type: 'ajax',
        actionMethods: { read: 'post' }
    }

});

表单：

var fstore = new permissionStore();
fstore.proxy.url = '/frame/ListAllPermission';

 var form = Ext.create('Ext.form.Panel', {
            url: url,
            layout: 'anchor',
            autoScroll: true,
            fieldDefaults: {
                labelWidth: 80,
                flex: 1,
                margin: 5
            },
            items: [
                {
                    name: 'Id',
                    xtype: 'hidden'
                }, {
                    name: 'RoutePath',
                    xtype: 'hidden'
                },
                {
                    xtype: 'container',
                    layout: 'hbox',
                    items: [
                        {
                            xtype: 'treepicker',
                            id: 'cmbfarther',
                            name: 'FartherId',
                            fieldLabel: '上级权限',
                            editable: false,
                            queryMode: 'remote',
                            emptyText: '--请选择--',
                            store: fstore,
                            displayField: 'Name',
                            valueField: 'ID',
                            forceSelection: true,
                            scrollable: true,
                            minPickerHeight: 200,
                            value: '' //这个定义很重要，如果没有设置或与store定义的rootid不一样，在提交时，如果这个下拉树没有选择，参数中将不包含FartherId
                        },
                        {
                            xtype: 'combo',
                            name: 'Type',
                            fieldLabel: '类型',
                            editable: false,
                            emptyText: '--请选择--',
                            queryMode: 'remote',
                            store: tstore,
                            displayField: 'name',
                            valueField: 'value',
                            forceSelection: true,
                            triggerAction: 'all',
                            allowBlank: false,
                            listeners: {
                                afterRender: function (combo) {
                                    var firstValue = tstore.getAt(0).data.value;
                                    combo.setValue(firstValue);
                                }
                            }
                        }
                    ]
                },
               .......
            ],
            buttons: [
                {
                    id: 'btnReset',
                    text: '重置',
                    handler: function () {
                        form.reset();
                    }
                }, {
                    text: '提交',
                    formBind: true,
                    disabled: true,
                    handler: function () {
                        formSubmit(form, function (data) {
                            var r = form.getRecord();
                            var v = form.getValues();

                            v.iconCls = v.Icon;//设置treemodel的定制属性

                            var target = fstore.getRootNode();
                            if (v.FartherId && v.FartherId != '') {
                                target = fstore.getNodeById(v.FartherId);
                            }

                            if (v.Id && v.Id != '') {
                                r.set(v);
                                var t = r;
                                r.remove(); //删除，treestore是这样删除的，一般的store是用store.remove(record)来删除的
                                target.appendChild(t);
                            } else {
                                r = Ext.create('permissionModel');
                                v.leaf = true;
                                r.set(v);
                                r.setId(data.id);

                                var node = target.appendChild(r);//用append
                                tree.selModel.select(node);

                                if (!target.isExpanded()) {
                                    target.expand(false);
                                }
                            }
                            win.close();
                        }, function () {
                            //win.close();
                        })
                    }
                }
            ]
        });