明示的なインスタンスを作成せずにExtjsストアを呼び出す方法

Question

最初のページが別のコンポーネントでビルドされているアプリケーションがあります。ページのload（main.js）にuserStoreインスタンスを作成していますuserStore私のヘッダーでは、ユーザーのfirstnameを取得し、ヘッダーセクションに表示します。

Ext.create('store.User', { 
    storeId : 'storeUser' 
}); 
    Ext.define('OnlineApp.view.Main', { 
    extend  : 'Ext.panel.Panel', 
    xtype  : 'app-main', 
    requires : [ 
     'Ext.plugin.Viewport' 

    ], 
    controller : 'main', 
    viewModel : 'main', 
    layout  : 'border', 
    padding  : '0 0 0 0', 
    bodyStyle : 'border:0', 
    items  : [ 
     { 
      xtype : 'appHeader', 
      region : 'north' 
     }, 
     { 
      xtype  : 'tabpanel', 
      region  : 'center', 
      bodyPadding : 0, 
      id   : 'contentPanel', 
      reference : 'contentPanel', 
      layout  : 'card', 
      border  : false, 
      scrollable : true, 
      tabBar  : { 
       hidden : true 
      }, 
      items  : [ 
       firstPage, 
       contentFrame, 

      ], 

     }, 

     { 
      xtype : 'footer', 
      region : 'south' 
     } 
     ] 
    }); 

** This is a Header file where I am trying to use the store below. Not sure what could be the best way to call store without creating a instance.** 

     Ext.define('OnlineApp.view.Header', { 
    extend: 'Ext.container.Container', 
    xtype : 'appHeader', 
    id  : 'main-header', 

    height : 100, 

    layout : { 
     type : 'hbox', 
     align : 'middle' 
    }, 
    initComponent: function() { 

     this.items = [ 

      { 
       xtype : 'container', 
       flex : .55, 
       layout : { 
        type: 'vbox', 
        align : 'right' 
       }, 
       collapsible : false, 
       padding : 5, 
       items : [ 
        { 
         xtype : 'container', 
         id  : 'app-header-user', 
         ui  : 'usp-plain-button', 
         layout : { 
          type : 'hbox', 
          align : 'center' 
         }, 
         items : [ 
          { 
           xtype : 'component', 
           html : 'Welcome, <b>' + Ext.getStore('storeUser').data.firstname + '</b>' **// I am trying to use the store getting fiest name as undefined.** 
          }, 
          { 
           xtype : 'gear-menu' 
          } 
         ] 
        }, 

      } 
     ]; 
      this.callParent(); 
     } 
    }); 

Answer 1

正しく生成/定義されたストアがあると仮定した場合。どこかでExt.define('store.User')があります。それ以外の場合はExt.create('Ext.data.Store',{storeId: 'storeUser'});

ですので、Ext.getStore('storeUser')はヘッダービューにストアオブジェクトを返します。その上にdata.firstnameを使用することはできません。ストアのdata propertyはExt.util.Collectionです。

あなたがストアからデータを取得したい場合は、使用する必要があります：

0は、お店でのレコードのインデックスである

Ext.getStore('storeUser').getAt(0).get('firstname') 

を。

あなたの場合はExt.Temaplesを使用することをお勧めします。公式example hereを確認してください。またはhereは、stackoverflowのかなりの例です。