ExtJs6中利用TreePicker实现下拉树

最近做的项目中有用到Extjs6，自己特意也做了程序用来练习使用Extjs6。在此记录一下使用Extjs6中遇到的问题。

如果有使用过Extjs的小伙伴们，一定知道在Extjs中有个combobox控件，这个主要用来下拉显示数据。但是如何实现在下拉时展示树形结构呢？今天就来介绍Extjs中的treePicker插件，该插件扩展了combobox，使下拉时展示出来的是个树形结构。先来看看效果图：

1.首先页面引入Extjs主题、extjs所需的主要的js文件和TreePicker.js文件。其中TreePicker.js在packages/ux/classic/src文件夹下。

2.构建treePicker控件并初始化到window上：

说明：因为本人使用本地数据做的测试，因此直接将json数据赋值到root上了。请求服务器数据的伙伴请自行百度搜索赋值方式。

<script type="text/javascript">
        Ext.onReady(function () {
            var fstore = Ext.create('Ext.data.TreeStore', {
                root: {
                    id:'all',
                    text:'全部',
                    expanded: true,
                    children: [
                        { text: '一级节点', leaf: true },
                        {
                            text: '二级节点2', expanded: true,
                            children: [
                                { text: '三级节点1', leaf: true },
                                { text: '三级节点2', leaf: true }
                            ]
                        },
                        { text: '一级节点3', leaf: true }
                    ]
                }
            });

            var form = Ext.create('Ext.form.Panel', {
                layout: 'anchor',
                autoScroll: true,
                rootVisiable: false,
                fieldDefaults: {
                    labelWidth: 80,
                    flex: 1,
                    margin: 5
                },
                items: [
                    {
                        xtype: 'container',
                        layout: 'hbox',
                        items: [
                            {
                                xtype: 'treepicker',
                                id: 'cmbfarther',
                                name: 'FartherId',
                                fieldLabel: '上级权限',
                                editable: false,
                                queryMode: 'remote',
                                emptyText: '--请选择--',
                                store: fstore,
                                displayField: 'text',
                                valueField: 'id',
                                forceSelection: true,
                                scrollable: true,
                                minPickerHeight: 200,
                                width: 500,
                                value: '', //这个定义很重要，如果没有设置或与store定义的rootid不一样，在提交时，如果这个下拉树没有选择，参数中将不包含FartherId
                                listeners: {
                                    select: function (view, record) {
                                        //此处写选中节点后的逻辑
                                    },
                                    change: function (combo, oldvalue, newvalue) {
                                        //此处写改变选中节点后的逻辑
                                    }
                                }
                            }
                        ]
                    },
                ]
            });

            var win = Ext.widget("window", {
                height: 500,
                width: 300,
                items: [form]
            });
            win.show();
        });
    </script>
           

3.如何自定义下拉展示层的宽度呢？此处需要修改treePicker.js源文件。

以上参考了https://blog.csdn.net/wyljz/article/details/79524630进行改写的，感谢wyljz提供的解决思路