javascript - 在 InitComponent EXTJS 中使用类型

Question

我对使用 EXTJS 有点陌生，所以我正在使用一个教程(修改它以满足我的要求)，但我遇到了一个错误。这是教程代码(我无法发布我的实际代码，但它具有相同的思想，只是方法名称不同):

    Ext.define('Srchr.view.Viewport', {
        extend: 'Ext.Viewport',
        requires: [
            'Srchr.view.SearchBar',
            'Srchr.view.History',
            'Srchr.view.SearchResults'
        ],
        layout: {
            type: 'fit'
        },
        initComponent: function() {
            this.items = [
                xtype: 'panel',
                cls: 'srchr',
                this.dockedItems = [
                    this.createSearchBar(),
                    this.createHistory()
                ];
                this.items = [{
                    id: 'tabs',
                    xtype: 'tabpanel',
                    layout: 'fit',
                    items: [
                        this.createTwitterSearchResults(),
                        this.createAnswersSearchResults()
                    ]
                }]
            ];
            this.callParent(arguments);
        },
        createSearchBar: function() {
            this.searchBar = Ext.create('widget.searchbar', {
                dock: 'top',
                height: 60  
            });
            return this.searchBar;
        },
        createHistory: function() {
            this.history = Ext.create('widget.history', {
                id: 'history',
                dock: 'left',
                width: 320
            });
            return this.history;
        },
        createTwitterSearchResults: function() {
            this.twitterSearchResults = Ext.create('widget.searchresults', {
                id: 'twittersearchresults',
                title: 'Twitter Search Results Placeholder'
            });
            return this.twitterSearchResults;
        },
        createAnswersSearchResults: function() {
            this.answersSearchResults = Ext.create('widget.searchresults', {
                id: 'answerssearchresults',
                title: 'Answers Search Results Placeholder'
            });
            return this.answersSearchResults;
        }
    });

这就是问题所在:我在第 14 行 xtype: 'panel' 上遇到错误，表示“意外的标记 :”。我已经尝试了我能想到的一切来解决这个问题，但找不到正确的解决方案。我怎样才能摆脱这个错误？

谢谢!

Answer 1

将面板项括在方括号中:

this.items = [{
  xtype       : 'panel',
  cls         : 'srchr',
  dockedItems : [this.createSearchBar(), this.createHistory()]
}]

除此之外，您还用一个选项卡面板覆盖了您的项目对象。如果你想添加两个项目，把两个放在你的数组中:

this.items = [{
  xtype       : 'panel',
  cls         : 'srchr',
  dockedItems : [this.createSearchBar(), this.createHistory()]
}, {
  id     : 'tabs',
  xtype  : 'tabpanel',
  layout : 'fit',
  items  : [this.createTwitterSearchResults(), this.createAnswersSearchResults()]
}]