javascript - 如何在停靠项目中水平显示元素并正确隐藏树条目。 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();
            });

        }
   }