Question

我有一个应用程序，它的第一个页面构建使用不同的组件。我在页面加载（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();
        }
    });

Answer 1

如果我们假设您已正确生成/定义商店。你某处有Ext.define('store.User')。否则，您应该使用Ext.create('Ext.data.Store',{storeId: 'storeUser'});

因此Ext.getStore('storeUser')会在标题视图中返回商店对象。您无法在其上使用data.firstname。因为商店中的data property是Ext.util.Collection。

如果您想从商店获取数据，请使用：

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

其中0是商店中记录的索引。

顺便说一句，我建议你使用Ext.Temaples，你可以查看官方example here。或者here在stackoverflow上是很好的例子。

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

1 个答案: