如何在ockedItems中水平顯示元素並正確隱藏樹條目。 EXTJS

Question

在Ext.tree.Panel組件的上部，我有一個搜索字段和兩個用於擴展和隱藏記錄的按鈕。 所有3個元素都在dockedItems ：

...
dockedItems: [
                 {
                    xtype:'toolbar',
                    reference: 'tbar',
                    docked: 'top',
                    items: [{
                        text: 'Expand All',                       
                        handler:function()
                        {
                          me.expandAll()
                          me.resumeLayouts(true)                          
                        }   
                    },{
                        text: 'Collapse All',                       
                        handler:function()
                        {
                          me.collapseAll()
                           console.log(me)
                        }
                    }]
                },
                {
                xtype: 'textfield',
                dock: 'top',
                emptyText: 'Search',
                enableKeyEvents: true,
....

1. 如何使所有3個元素都在同一條水平線上？ 現在，搜索字段下移到字段的后面以隱藏和公開記錄。
2. 是否與確保只在第一個嵌套級別隱藏記錄相同，以便使記錄“ Otdel 1”和“ Otdel 2”保持可見？ 屏幕截圖應該是

我在Fiddle中准備了一個示例。

謝謝

Answer 1

回答第一項，因為您已經有了一個工具欄，只需將文本字段放入其中：

dockedItems: [
         {
            xtype:'toolbar',
            reference: 'tbar',
            docked: 'top',
            items: [{
                        text: 'Expand All',
                        handler:function() {
                            me.expandAll()
                            me.resumeLayouts(true)
                        }   
                    },
                    {
                        text: 'Collapse All',
                        handler:function()
                        {
                          me.collapseAll()
                          console.log(me)
                        }
                    },
                    {
                        xtype: 'textfield',
                        dock: 'top',
                        emptyText: 'Search',
                        enableKeyEvents: true,

                        triggers: {
                            clear: {
                                cls: 'x-form-clear-trigger',
                                handler: 'onClearTriggerClick',
                                hidden: true,
                                scope: 'this'
                            },
                            search: {
                                cls: 'x-form-search-trigger',
                                weight: 1,
                                handler: 'onSearchTriggerClick',
                                scope: 'this'
                            }
                        }
                   }]

在第二項中，嘗試以下操作：

    {
        text: 'Collapse All',
        handler:function(){

            var node = me.getStore().getRoot();
            node.eachChild(function(child){
                  child.collapse();
            });

        }
   }