ExtJS window 中可调整大小的树面板

Question

我有一个树面板：

treepanel = Ext.define('filteredTree', {
                      extend: 'Ext.tree.Panel',
                      title: 'Filtered Tree',
                      store: store,
                      width: 784,
                      height: 550,
                      buttons: [
                       {
                           text: 'Select',
                           handler: function () {
                               var panel = this.up('treepanel');
                               //...selection of value
                           }
                       }
                    ]
    //...Here is search mechanism

    });

和显示它的 window。 window 可调整大小：

        win = Ext.create('widget.window', {
            title: 'Выбор значения из словаря',
            header: {
                titlePosition: 2,
                titleAlign: 'center'
            },
            closable: true,
            closeAction: 'hide',
            maximizable: true,
            width: 800,
            minWidth: 350,
            height: 600,
            tools: [{ type: 'pin' }],
            theme:"classic",
            layout: {
                type: 'border',
                padding: 5
            },
            items: [
                 Ext.create('filteredTree')
            ]
        });

我想看看 window 大小是否改变面板的大小也会改变。我该怎么做？

Answer 1

将 window 的布局更改为 fit。

面板将占据 window 内的完整 space 并调整大小 accordingly.You 可以从树面板中删除高度和宽度。

Ext.create('Ext.window.Window', {
            title: 'Выбор значения из словаря',
            header: {
                titlePosition: 2,
                titleAlign: 'center'
            },
            closable: true,
            closeAction: 'hide',
            maximizable: true,
            width: 600,
            minWidth: 350,
            height: 400,

            layout:'fit',
            items: [
                {xtype:'treepanel',
                 padding:5,
                      title: 'Filtered Tree',                 
                      buttons: [
                       {
                           text: 'Select',
                           handler: function () {
                               var panel = this.up('treepanel');

                           }
                       }
                    ]}  
            ]
        }).show();