2015-07-22 1 views
1

Я использую Ext5, и у меня есть вопрос. Можно ли удалить текст и добавить элементы в заголовок панели после того, как панель рухнула?ExtJS удаляет текст и добавляет элементы в заголовок после разваливания панели

Подходит коду, восточная панель разборная. Я хочу удалить текст и добавить элементы в заголовок после его свертывания.

Ext.create('Ext.container.Viewport', { 
    layout: 'border', 
    items: [{ 
     region: 'east', 
     title: 'East Panel', 
     collapsible: true, 
     split: true, 
     width: 150 
    }, { 
     region: 'center', 
     xtype: 'tabpanel', // TabPanel itself has no title 
     activeTab: 0,  // First tab active by default 
     items: { 
      title: 'Default Tab', 
      html: 'The first tab\'s content. Others may be added dynamically' 
     } 
    }] 
}); 

UPDATE

В этом случае, я добавлять кнопки в заголовок, но когда панель свернута кнопка исчезла. Есть ли способ показать или добавить компоненты в заголовок, когда панель рухнула?

{   
    region: 'east',   
    title: 'East Panel',   
    collapsible: true,   
    split: true,   
    width: 150, 
    header: { 
     items: [{ 
      xtype: 'button' 
     }, { 
      xtype: 'button' 
     }] 
    } 
} 

здесь является fiddle

Благодаря

+0

http://docs.sencha.com/extjs/5.1/5.1.0-apidocs/#!/api/Ext.panel.Panel-cfg-placeholder – Yellen

+0

Какие пункты вы хотите добавить ? Должен ли заголовок иметь такое же поведение, как сейчас? –

+0

Привет, Элиас Медейрос. На самом деле, я предпочитаю добавлять кнопки в заголовок, когда панель рушится. –

ответ

3

См. «Конфигурации, связанные с заполнителем» в классе Ext.panel.Panel. Ниже приведен код вашего скрипта.

Ext.create('Ext.container.Viewport', { 
    layout: 'border', 
    items: [{ 
     region: 'east', 
     title: 'East Panel', 
     collapsible: true, 
     collapseMode:'placeholder',// set collapseMode to placeholder 
     split: true, 
     width: 300, 
     placeholder:{ // Try different components and layout configs 
      width:100, 
      items:[{ 
       xtype:'button', 
       text:'Button 1' 
      }] 
     } 
     /*header: { 
      items: [{ 
       xtype: 'button' 
      }, { 
       xtype: 'button' 
      }] 
     }*/ 
    }, { 
     region: 'center', 
     xtype: 'tabpanel', // TabPanel itself has no title 
     activeTab: 0,  // First tab active by default 
     items: { 
      title: 'Default Tab', 
      html: 'The first tab\'s content. Others may be added dynamically' 
     } 
    }] 
}); 
0

Заголовок вы видите развалился на самом деле еще один экземпляр Ext.panel.Header создан только для этой цели. Я попытался найти некоторые конфиги, чтобы настроить его, но Ext.panel.Panel не был создан, имея это в виду.

Так что вам придется переопределить метод, который создает этот читатель, который я узнал, называется createReExpander. Это большой метод, который трудно переопределить, не переписывая много вещей, но это можно сделать.

Я попытался добавить кнопки в заголовок, и результат не был визуально приятным, но по крайней мере они были созданы! Так что я предлагаю вам использовать tools вместо кнопок, если вам не нужен текст.