Utilisation de type dans InitComponent EXTJS

Question

Je suis un peu novice dans l'utilisation d'EXTJS, donc je travaillais avec un tutoriel (en le modifiant pour répondre aux exigences que j'ai), et je cours une erreur. Voici le code de tutoriel (je ne peux pas poster mon code réel, mais il a la même idée, à différents noms de méthode):

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

Alors voici la question: je reçois une erreur sur la ligne 14 xtype : 'panel', pour "Jeton inattendu:". J'ai essayé tout ce que je peux penser pour résoudre le problème, et je ne trouve pas la bonne solution. Comment puis-je me débarrasser de cette erreur?

Merci!

Answer 1

envelopper votre panneau élément entre parenthèses:

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

En outre, vous surchargez vos articles avec un objet tabpanel. Si vous souhaitez ajouter deux éléments, placez-en deux dans votre tableau:

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