Сплит-бар (Splitter) не отображается.Только при наведении мыши на экран выводится сплиттер - PullRequest
Новая
       28

Сплит-бар (Splitter) не отображается.Только при наведении мыши на экран выводится сплиттер

0 голосов
/ 03 октября 2018

У меня есть макет границы extJS.Мои компоненты размещены во всех четырех регионах.Теперь у меня есть свойства split (также split: true), и сплиттер работает нормально, но сплиттер должен отображаться между границами, а этого не происходит.

Сплиттер отображается только при наведении курсора мыши на границу. Вот мой код.Любой взлом будет отличным. 

Ext.onReady(function() {
    Ext.create('Ext.panel.Panel', {
       renderTo: Ext.getBody(),
       height: 300,
       width: 600,
       layout:'border',

       defaults: {
         // collapsible: true,
          split: {
              size :10
          },
          bodyStyle: 'padding:15px'
       },
       items: [{
          title: 'Panel1',
          region:'west',
          html: 'This is Panel 1'
       },{
          title: 'Panel2',
          region:'center',
          html: 'This is Panel 2'
       },{
          title: 'Panel3',
          region: 'south',
          html: 'This is Panel 3'
       },{
          title: 'Panel4',
          region: 'east',
          html: 'This is Panel 4'
       },{
          title: 'Panel5',
          region: 'north',
          html: 'This is Panel 5'
       }]
    });
 });

1 Ответ

0 голосов
/ 04 октября 2018

Для быстрого взлома нужно использовать «collapsible: true», это покажет маленькую стрелку на границах. 

Ext.create('Ext.panel.Panel', {
   renderTo: Ext.getBody(),
   height: 300,
   width: 600,
   layout:'border',

   defaults: {
     // collapsible: true,
      split: {
          size :10
      },
      collapsible: true,
      //collapseMode: 'mini',
      bodyStyle: 'padding:15px'
   },
   items: [{
      title: 'Panel1',
      region:'west',
      html: 'This is Panel 1'
   },{
      title: 'Panel2',
      region:'center',
      html: 'This is Panel 2'
   },{
      title: 'Panel3',
      region: 'south',
      html: 'This is Panel 3'
   },{
      title: 'Panel4',
      region: 'east',
      html: 'This is Panel 4'
   },{
      title: 'Panel5',
      region: 'north',
      html: 'This is Panel 5'
   }]
});
...