TypeError: p 在使用 xtype: 'treepicker' 时未定义。 Extjs6

Question

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

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字段？

谢谢

Answer 1

您的代码中的问题，至少在您的小提琴中是您将“编辑表单”定义为完全 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);
    }
});