В навигационном представлении элементы отображаются неправильно - PullRequest
Новая
       2

В навигационном представлении элементы отображаются неправильно

1 голос
/ 04 марта 2012

Представление не отображается должным образом.Он показывает только кнопку.Что я здесь не так делаю? 

Ext.application({
  name: 'App',    
  models: ['Picture'],
  stores: ['Pictures'],
  views: ['Picture'],

  requires: [
      'Ext.carousel.Carousel',
      'Ext.data.proxy.JsonP'
  ],

  launch: function() {
      var titleVisible = false,
          info, carousel;


      carousel = Ext.create('Ext.Carousel', {

          store: 'Pictures',
          direction: 'horizontal',
          listeners: {
              activeitemchange: function(carousel, item) {
                  info.setHtml(item.getPicture().get('title'));
              }
          }
      });


      info = Ext.create('Ext.Component', {
          cls: 'apod-title',
          top: '50',
          left: 0,
          right: 0
      });

      var view = Ext.create('Ext.NavigationView', {
      title:'Paramore',
      items: [carousel,info,{xtype:'button',text:'help'}]

      });


       Ext.Viewport.add(view);

     --- some code ----           

      });


  }
});

. Я также пробовал это

var view = Ext.create ('Ext.NavigationView', {title: 'Test', items: [{xtype: 'container', заголовок: 'test', прокручиваемый: 'вертикальный', элементы: [carousel, info]}

1 Ответ

1 голос
/ 06 марта 2012

Есть несколько проблем с вашим кодом:

  1. Ext.Carousel не поддерживает конфигурацию store. Вы можете узнать, как это сделать здесь .

  2. items, указанный в навигационном представлении, является начальным stack элементов при освобождении. Таким образом, если вы добавите 3 элемента, последний элемент будет виден, а кнопка Назад будет видна. Когда вы нажмете кнопку «Назад», этот последний элемент будет удален, а в стеке items будет .

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

Если вы удалите ссылку на store и listeners из вашей карусели, ваш пример будет работать как положено. Вот код, который я использовал, чтобы заставить его работать. Я только что закомментировал неработающий код: 

Ext.application({
    name: 'App',
    // models: ['Picture'],
    // stores: ['Pictures'],
    // views: ['Picture'],
    requires: ['Ext.carousel.Carousel', 'Ext.data.proxy.JsonP'],

    launch: function() {
        var titleVisible = false,
            info, carousel;

        carousel = Ext.create('Ext.Carousel', {
            // store: 'Pictures',
            direction: 'horizontal',
            items: [{
                html: 'one'
            }, {
                html: 'two'
            }, {
                html: 'three'
            }]
            // listeners: {
            //     activeitemchange: function(carousel, item) {
            //         // info.setHtml(item.getPicture().get('title'));
            //     }
            // }
        });

        info = Ext.create('Ext.Component', {
            cls: 'apod-title',
            top: '50',
            left: 0,
            right: 0
        });

        var view = Ext.create('Ext.NavigationView', {
            title: 'Paramore',
            items: [carousel, info,
            {
                xtype: 'button',
                text: 'help'
            }]
        });

        Ext.Viewport.add(view);
    }
});
...