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

示例链接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);
    }
});

使用xtype：'treepicker'时，TypeError：p未定义。 Extjs6

1 个答案: