Use of Type in InitComponent EXTJS

Question

I'm a bit new at using EXTJS, so I was working with a tutorial (modifying it to fit the requirements I have), and I'm running into an error. Here is the tutorial code (I can't post my actual code, but it has the same idea, just different method names):

    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;
        }
    });

So here's the issue: I'm getting an error on line 14 xtype: 'panel', for "Unexpected token :". I've tried everything I can think of to fix the issue, and can't find the right solution. How can I get rid of this error?

Thanks!

Answer 1

Wrap your panel-item in brackets:

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

Besides this, you are overriding your items object with a tabpanel. If you want to add two items, put two in your array:

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