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提供的解決思路