如何在ockedItems中水平显示元素并正确隐藏树条目。 Extjs

Question

在resolve组件的上部，我有一个搜索字段和两个用于扩展和隐藏记录的按钮。 所有3个元素都在Ext.tree.Panel中：

dockedItems

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();
            });

        }
   }