Question

视图无法正确呈现。它只显示按钮。我在这做错了什么？

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'，{ 标题：“测试”，项目：[ { xtype：'容器'，标题：'测试'，可滚动：'垂直'，项目：[carousel，info] }

Answer 1

您的代码存在一些问题：

Ext.Carousel不支持store配置。您可以了解如何执行此操作here。
导航视图中指定的items是发布时的初始stack项。因此，如果您输入3个项目，则会显示最后一个项目，并且可以看到后退按钮。当您按后退按钮时，它将删除最后一项，items 堆栈中将有2个项目。
您可能不应该将Ext.Button直接放在NavigationView中。这样做会使按钮拉伸到NavigationView的大小，使其看起来非常糟糕。

如果您从Carousel中移除对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);
    }
});

导航视图未正确呈现项目

1 个答案: