从cookie设置EXTjs按钮/项目文本

Question

我使用了EXTjs版本5.我在其中创建了一个带有EXTjs的Cookie来存储已登录用户的用户名。所以接下来我要做的是在按钮/项目中显示存储的用户名。

按钮/项目代码如下：

items: [{
    xtype: 'splitbutton',
    text: 'The username from the cookie must placed here',
    menu: new Ext.menu.Menu({
       items: [
           {text: 'Uitloggen', handler: 'onLogoutClick' }
       ]
    })
}]

Answer 1

根据你的评论，我给你一个viewmodel和cookie的例子。

如果您想使用ViewModel和Cookies，您需要使用公式来设置数据。

示例：https://fiddle.sencha.com/#fiddle/lnn

Ext.define("MyViewModel", {
    extend: "Ext.app.ViewModel",

    alias: "viewmodel.myviewmodel",

    data: {
        _username: null
    },

    formulas: {
        username: {
            bind: "{_username}",

            get: function(val) {
                if (Ext.isEmpty(val))
                    val = Ext.util.Cookies.get("myUsername");
                return val;
            },

            set: function(val) {
                Ext.util.Cookies.set("myUsername", val);
                this.set("_username", val);
            }
        }
    }
});

Ext.create("Ext.Viewport", {
    viewModel: "myviewmodel",
    items: [{
        xtype: "textfield",
        fieldLabel: "Username",
        bind: "{username}"
    }, {
        xtype: 'splitbutton',
        bind: "{username}",
        //text: 'The username from the cookie must placed here',
        menu: new Ext.menu.Menu({
            items: [{
                text: 'Uitloggen',
                handler: 'onLogoutClick'
            }]
        })
    }]
});