如何调用Extjs存储,而不创建它的显式实例

How to Call an Extjs store without creating an explicit instance of it

本文关键字:创建 实例 何调用 调用 存储 Extjs      更新时间:2023-09-26

我有一个应用程序,这是它的第一页构建与不同的组件。我在页面加载(main.js)上创建一个userStore实例,我想在我的头中访问userStore,以获得用户的名字并在头部分显示它。

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

如果我们假设您已经正确地生成/定义了存储。在某个地方有Ext.define('store.User')。否则你应该使用Ext.create('Ext.data.Store',{storeId: 'storeUser'});

所以Ext.getStore('storeUser')是返回存储对象在你的头部视图。你不能只用data.firstname。因为存储中的data属性是Ext.util.Collection.

如果你想从你的存储中获取数据,你应该使用:

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

其中0为存储中记录的索引。

顺便说一句,在你的情况下,我建议你使用ext . temples,你可以在这里查看官方示例。这是关于stackoverflow的一个很好的例子。