类型错误：使用 xtype: 'treepicker' 时未定义 p。Extjs6

Question

在记录编辑窗口中，我需要使用树选择器，为此，文件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

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

Answer 1

您的代码中的问题，至少在您的小提琴中是您将“编辑表单”定义为完全 json，它将在加载时被解析和执行。由于加载时没有 StorageStore，因此 treepicker 的 store 参数将为空，这就是您收到错误的原因。正确的方法是在对象实例化上设置表单项，如下所示，工作小提琴在这里。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);    }});