Вложенные плавающие панели Sencha Touch с каруселями - PullRequest
Новая
       0

Вложенные плавающие панели Sencha Touch с каруселями

1 голос
/ 23 августа 2011

До сих пор я только пытался добиться того, что высмеял на скриншоте.

mockup

По сути, у меня есть полноэкранная панель отчетов с 6 вложенными панелями.внутри.Каждая из этих панелей (я буду называть их плитками, поскольку это имеет больше смысла) должна отображаться одновременно (используется макет: «исправить») для главной панели.Внутри каждой плитки есть карусель, которая заполняет элементы одним вызовом ajax. Если вызов ajax возвращает 3 элемента, то в карусели будет 3 элемента и т. Д.

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

Не слишком заботясь о карусельной части, пытаясь получитьправильно расположенные плитки внутри панели - это боль.Я могу в значительной степени добраться туда с помощью CSS, используя плавающие элементы, но первая панель всегда выглядит испорченной.С тех пор я немного почитал, пытаясь добиться более «сенча» способа сделать это. 

var rep1 = new PortalDashboard.views.Reportimagetile;
var rep2 = new PortalDashboard.views.Reportimagetile;
var rep3 = new PortalDashboard.views.Reportsinglefigtile
var rep4 = new PortalDashboard.views.Reportimagetile;
var rep5 = new PortalDashboard.views.Reportimagetile;
var rep6 = new PortalDashboard.views.Reportimagetile;

PortalDashboard.views.Dashboardcard = Ext.extend(Ext.Panel, {
  title: 'Dashboard',
  html: '',
  cls: 'card5',
  layout: 'fit',
  iconCls: 'team',
  styleHtmlContent: true,
  initComponent: function () {
    Ext.apply(this, {
      items: [
      rep1, rep2, rep3, rep4, rep5, rep6]
    });
    PortalDashboard.views.Dashboardcard.superclass.initComponent.apply(this, arguments);
  }
});



Ext.reg('dashboardcard', PortalDashboard.views.Dashboardcard);

- 

PortalDashboard.views.Reportsinglefigtile = Ext.extend(Ext.Panel, {
  html: '',
  cls: 'dashtilecontent',
  initComponent: function () {
    Ext.apply(this, {
     html: '<h1>99.99%</h1>'
    });
    PortalDashboard.views.Reportsinglefigtile.superclass.initComponent.apply(this, arguments);
  }
});

Ext.reg('reportimagetile', PortalDashboard.views.Reportsinglefigtile);

1 Ответ

1 голос
/ 25 августа 2011

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

layout: {
  type: 'vbox',
  align: 'center',
  pack: 'center'
}

, поэтому теперь все добавляемые вами элементы будут находиться в центре корпуса панели и стека.вертикально ... поэтому добавьте 2 панели для каждой строки, и на этих панелях используйте макет hbox и добавьте 3 карты к каждой из этих панелей 

layout: {
  type: 'hbox',
  align: 'center',
  pack: 'center'
}

(эти настройки выравнивания или упаковки могут не соответствовать вашим потребностям, есливы планируете использовать разные размеры для разных блоков, и в этом случае вам нужно будет использовать свойство flex, чтобы задать для коробок нужные вам пропорции)

...