Question

在回到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

提前致谢。

Answer 1

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

Answer 2

只需使用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调用。

ExtJS4：在表单面板中未定义在initComponent中创建的存储

2 个答案: