2

在回到 ExtJS4 文档并在他们的示例行中逐行复制试图解决我可能出错的地方之后，我很难过。嗅探 initComponent 处于不幸的操作顺序的问题。

正在定义的商店是 1) 不填充该字段，并且 2) 在尝试从字段侦听器调用它之后被认为是未定义的。

我在 initComponent 中定义了一个这样的商店，

Ext.define('X.view.NewLogWindow', {
extend: 'Ext.window.Window',
xtype:'newlogwindow',
itemId: 'newLogWindow',
width: 300,
height: 140,
modal: true,
title: 'Create Log',
layout: 'fit',
initComponent: function() {

    this.monthStore = Ext.create('Ext.data.Store', {
        fields : [
            {name : 'id', type : 'int'}, {name : 'month', type : 'string'}
        ],
        autoLoad: true,
        data : [
            {"id" : 0, "month" : "January"},
            {"id" : 1, "month" : "February"},
            {"id" : 2, "month" : "March"},
            {"id" : 3, "month" : "April"},
            {"id" : 4, "month" : "May"},
            {"id" : 5, "month" : "June"},
            {"id" : 6, "month" : "July"},
            {"id" : 7, "month" : "August"},
            {"id" : 8, "month" : "September"},
            {"id" : 9, "month" : "October"},
            {"id" : 10, "month" : "November"},
            {"id" : 11, "month" : "December"}
        ]
    });

    var x = 'fixme';

    console.log(this.monthStore);
    console.log(x);


    this.callParent();


}

然后，我将商店分配给表单面板中的组合框，如下所示：

items: [
    {
        xtype: 'form',
        margin: 10,
        border: false,
        defaults: {allowBlank: false},
        items: [
            {
                xtype: 'combobox',
                fieldLabel: 'Log Month',
                store: this.monthStore,
                queryMode : 'local',
                displayField: 'month',
                valueField: 'id',
                listeners: {blur: function(field)
                {
                    console.log(this.monthStore);
                    console.log(this.x);
                    }

                }
            }
        ]
    }
]

以下是我的控制台日志记录的输出：

constructor NewLogWindow.js:40
fixme NewLogWindow.js:41
undefined NewLogWindow.js:74
undefined NewLogWindow.js:75

提前致谢。

4

2 回答 2

1

您正在努力解决的是“这个”上下文的范围。在控制台输出上放置一个断点并检查“this”对象。它会让你走上正确的道路。

于 2012-05-21T22:27:31.863 回答
1

只需使用storeId配置，这样您就可以掌握商店的句柄，例如：

initComponent: function() {

    Ext.create('Ext.data.Store', {
        storeId: 'months',
        fields : [
            {name : 'id', type : 'int'}, {name : 'month', type : 'string'}
        ],
        autoLoad: true,
        data : [
            {"id" : 0, "month" : "January"},
            {"id" : 1, "month" : "February"},
            {"id" : 2, "month" : "March"},
            {"id" : 3, "month" : "April"},
            {"id" : 4, "month" : "May"},
            {"id" : 5, "month" : "June"},
            {"id" : 6, "month" : "July"},
            {"id" : 7, "month" : "August"},
            {"id" : 8, "month" : "September"},
            {"id" : 9, "month" : "October"},
            {"id" : 10, "month" : "November"},
            {"id" : 11, "month" : "December"}
        ]
    });

// etc...

然后，您可以使用store: Ext.StoreManager.lookup('months')将其分配到您想要的位置。

还要实现initComponent在组件中的静态数据处理完后调用。我不知道你在哪里运行上面的第二个代码块。但是您必须创建该组合以使用您在创建initComponent商店之后创建的商店，即initComponent调用之后。您可以在initComponent创建商店后立即执行以下操作：

this.items = [{
    xtype: 'form',
    margin: 10,
    border: false,
    defaults: {allowBlank: false},
    items: [{
        xtype: 'combobox',
        fieldLabel: 'Log Month',
        store: Ext.StoreManager.lookup('months'),
        queryMode : 'local',
        displayField: 'month',
        valueField: 'id',
        listeners: {
            blur: function(field) {
                console.log(this.monthStore);
                console.log(this.x);
            }
        }
    }]
}];

如果我有一个可以被多个视图使用的参考存储，我要做的另一件事是在控制器中创建它。然后，当我创建一个视图实例时，我已经可以使用它了，我可以执行StoreManager.lookup上面显示的调用。

于 2012-05-22T01:57:05.540 回答