javascript - 从 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'
            }]
        })
    }]
});