Sencha Touch: Как вписать панель инструментов Ext.Panel в контент?

Question

У меня есть Ext.Panel с 'toolbar', который будет содержать переменное количество содержимого в <div>, которое я хочу обеспечить достаточно большим, чтобы вместить весь контент. Есть ли способ динамического изменения размера панели инструментов в соответствии с ее содержимым?

Когда я добавляю, скажем, несколько строк к <div>, они обрезаются. Свойство layout: 'fit' хранит его относительно родительского контейнера, но как мне расширить его, чтобы оно содержало весь дочерний контент?

Панель инструментов на панели определяется следующим образом (затем она добавляется в 'card' Макет панели).

    var panelTitle = 'Old McStopher's Panel'
    this.listpanel = new Ext.Panel({
        title: panelTitle,
        items: this.list,
        layout: 'fit',
        dockedItems: {
            xtype: 'toolbar',
            html: '<div class="statsTpl">Old McStopher's Content</div>',
            title: panelTitle
        }
    });

Я использую SASS / SCSS. Есть ли рекомендуемый способ сделать это с таким? Или есть какое-то свойство для самой панели инструментов?

Answer 1

Ext.Toolbar наследуется напрямую от Ext.Container и поэтому имеет параметры макета.Если вы дадите панели инструментов другой макет, например autocontainer или fit, вы сможете использовать атрибут title при наличии расширяющейся панели инструментов.

Answer 2

Итак, ответ на данный момент заключается в том, чтобы просто удалить xtype: 'toolbar'.Заголовок не отображается, но это не проблема, так как <div> будет иметь весь необходимый контент (включая заголовок, если потребуется).Поскольку содержимое все еще находится в dockedItems, оно все равно закрепляется наверху и не прокручивается, как содержимое this.list.Таким образом, можно спорить, технически ли это соответствует «панели инструментов», но конечный результат динамического соответствия верхнего содержимого достигнут.