Как отображать элементы горизонтально в dockedItems и правильно скрывать записи дерева.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'и «Отдел 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();
            });

        }
   }