javascript - 使用xtype:'treepicker'时，TypeError:p未定义。 Extjs6

在记录编辑窗口中，我需要使用树选择器，为此，Ext.ux.TreePicker文件包含在app.js文件中，该文件位于与app文件位于同一级别的app.js文件夹中。

Ext.Loader.setConfig({enabled:true});
Ext.Loader.setPath('Ext.ux', 'app');
Ext.application({
    extend: 'Ext.app.Application',
    name: 'App',
    appFolder: 'app',
    requires: ['Ext.ux.TreePicker'],
...

在记录编辑窗口中，设置xtype: 'treepicker'字段：

Ext.define('App.view.OperationEdit', {
    extend: 'Ext.window.Window',
    xtype: 'operation-edit',
    alias: 'widget.operationedit',
    controller: 'operation_controller',
    viewModel: {
        type: 'operation_model'
    },
    defaults: {
        xtype: 'textfield',
        margin: 10,
        labelAlign: 'top'
    },
    closable: true,
    items: [{
        xtype: 'form',
            items: [
{
    xtype: 'treepicker',
    store: Ext.data.StoreManager.get('StorageStore'),
    fieldLabel: "Mesto_hraneniya",
    valueField: 'id',
    displayField: 'text',
    selectChildren: true,
    canSelectFolders: true,
    name: 'mesto_hraneniya'
 },
......

当我打开编辑窗口时，出现错误：

TypeError: p is undefined

链接示例Fiddle

为什么会出现错误？如何正确显示treepicker字段？

谢谢

最佳答案

代码中的问题，至少是摆弄小提琴的问题是，您将“编辑表单”定义为完全json，将在加载时进行解析和执行。由于在加载时没有StorageStore，treepicker的store参数将为null，这就是您得到错误的原因。正确的方法是在对象实例上设置表单项，如下所示，有效的提琴是here。

Ext.define('App.view.TestEdit', {
    extend: 'Ext.window.Window',
    xtype: 'test-edit',
    alias: 'widget.testedit',
    requires: ['App.store.StorageStore'],
    controller: 'app_view_testgrid',
    defaults: {
        xtype: 'textfield',
        margin: 10,
        labelAlign: 'top'
    },
    closable: true,
    items: [],

    initConfig: function(config){
        config = config || {};
        config.items = [
            {
            xtype: 'form',
            items: [{
                xtype: 'combobox',
                store: {
                    type: 'type-store'
                },
                fieldLabel: 'Type',
                displayField: 'name',
                valueField: 'id',
                name: 'id_type',
                reference: 'mycombo',

            }, {
                xtype: 'textfield',
                fieldLabel: 'My field',
                name: 'mytextfield'
            }, {
                xtype: 'treepicker',
                store: Ext.data.StoreManager.get("StorageStore"),
                fieldLabel: "Mesto_hraneniya",
                valueField: 'id',
                displayField: 'text',
                selectChildren: true,
                canSelectFolders: true,
                name: 'mesto_hraneniya'
            }, {
                xtype: 'button',
                minWidth: 70,
                text: 'Save',
                listeners: {
                    click: 'saveRecord'
                }
            }]
        }
        ];
        this.callParent(arguments);
    }
});

关于javascript - 使用xtype:'treepicker'时，TypeError:p未定义。 Extjs6，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56427806/