1

我已经开始实现一个简单的 Sencha Touch MVC 应用程序（使用 Sencha Touch 2.2.0），它主要工作，但我无法让控制器实例化列表中显示的项目的编辑器视图。

我通过它的 xtype 引用编辑器，但编辑器实例的相应属性是“未定义”。我在这里和 Sencha Touch 论坛上找到的所有类似问题的解决方案都没有帮助。我正在使用导航器视图在页面之间切换。

这是 app.js 源代码：

var app = Ext.application({
name: 'PotApp',

models: ['GlazeMaterial', 'Clay'],
stores: ['GlazeMaterials', 'Clays'],
views: ['Dashboard', 
        'ReferenceDataMenu',
        'CalculatorMenu',
        'GlazeMaterialsList',
        'GlazeMaterialEditor'],
controllers: ['Dashboard', 'Calculator', 'GlazeMaterials'],

launch: function() {
    this.launched = true;
    this.mainLaunch();
},

mainLaunch: function() {
    if (!window.isDesktop)
    {
    if (!device || !this.launched)
    {
        return;
    }
}

    var dashboard = {
        xtype: 'dashboard'
    };

    Ext.Viewport.add([dashboard]);
}
});

显示列表的导航控制器部分（工作正常）：

onShowGlazeMaterialsCommand: function () {
    var dashboardView = this.getDashboard();
    dashboardView.push({
       xtype: 'glazeMaterialsList'
    });
}

用于处理列表的控制器和用于釉料的编辑器。问题似乎是 glazeMaterialEditor: 'glazeMaterialEditor' 行，它没有将 glazeMaterialEditor 设置为编辑器的实例。

Ext.define('PotApp.controller.GlazeMaterials', {

extend: 'Ext.app.Controller',

config: {
    refs: {
        glazeMaterialsList: 'glazeMaterialsList',
        glazeMaterialEditor: 'glazeMaterialEditor',

        dashboard : {
            autoCreate: true,
            selector: '#dashboard',
            xtype: 'dashboard'
        }
    },
    control: {
        glazeMaterialsList: {
            newGlazeMaterialCommand: 'onNewGlazeMaterialCommand',
            editGlazeMaterialCommand: 'onEditGlazeMaterialCommand'
        },
        glazeMaterialEditor: {
            saveGlazeMaterialCommand: 'onSaveGlazeMaterialCommand',
            deleteGlazeMaterialCommand: 'onDeleteGlazeMaterialCommand',
            backToHomeCommand: 'onBackToHomeCommand'
        }
    }
},

activateGlazeMaterialEditor: function (record, pop) {

    var glazeMaterialEditor = this.getGlazeMaterialEditor();
    glazeMaterialEditor.setRecord(record); // load() is deprecated.

    var dashboardView = this.getDashboard();

    if (pop)
    {
        this.getDashboard().pop();
    }

    this.getDashboard().push(glazeMaterialEditor);
},

activateGlazeMaterialsList: function (pop) {
    var dashboardView = this.getDashboard();
    if (pop)
    {
        this.getDashboard().pop();
    }

    this.getDashboard.push(this.getGlazeMaterialsList());
},

onNewGlazeMaterialCommand: function () {
    console.log('onNewGlazeMaterialCommand');

    var newGlazeMaterial = Ext.create('PotApp.model.GlazeMaterial', {
        Name: '',
        Description: ''
    });

    this.activateGlazeMaterialEditor(newGlazeMaterial, false); 

},

onEditGlazeMaterialCommand: function (list, record) {

    console.log('onEditGlazeMaterialCommand');

    this.activateGlazeMaterialEditor(record, false);
},

onSaveGlazeMaterialCommand: function () {

    console.log('onSaveGlazeMaterialCommand');

    var glazeMaterialEditor = this.getGlazeMaterialEditor();
    var currentGlazeMaterial = glazeMaterialEditor.getRecord();
    var newValues = glazeMaterialEditor.getValues();

    // Update the current GlazeMaterial's fields with form values.
    currentGlazeMaterial.set('Name', newValues.Name);
    currentGlazeMaterial.set('Description', newValues.Description);

    var errors = currentGlazeMaterial.validate();

    if (!errors.isValid()) {
        Ext.Msg.alert('Wait!', errors.getByField('title')[0].getMessage(), Ext.emptyFn);
        currentGlazeMaterial.reject();
        return;
    }

    var glazeMaterialsStore = Ext.getStore('GlazeMaterials');

    if (null == glazeMaterialsStore.findRecord('Name', currentGlazeMaterial.data.Name)) {
        glazeMaterialStore.add(currentGlazeMaterial);
    }

    glazeMaterialsStore.sync();

    glazeMaterialsStore.sort([{ property: 'Name', direction: 'ASC'}]);

    this.activateGlazeMaterialsList(true);
},

onDeleteGlazeMaterialCommand: function () {

    console.log('onDeleteGlazeMaterialCommand');

    var glazeMaterialEditor = this.getGlazeMaterialEditor();
    var currentGlazeMaterial = glazeMaterialEditor.getRecord();
    var glazeMaterialsStore = Ext.getStore('GlazeMaterials');

    glazeMaterialsStore.remove(currentGlazeMaterial);
    glazeMaterialsStore.sync();

    this.activateGlazeMaterialsList(true);
},

// Base Class functions.
launch: function () {
    this.callParent(arguments);
    var glazeMaterialsStore = Ext.getStore('GlazeMaterials');
    glazeMaterialsStore.load();
    console.log('launch');
},
init: function () {
    this.callParent(arguments);
    console.log('init');
}
});

编辑器视图：

Ext.define('PotApp.view.GlazeMaterialEditor', {
extend: 'Ext.form.Panel',
requires: ['Ext.Toolbar', 'Ext.form.FieldSet', 'Ext.form.Text', 'Ext.field.TextArea',   'Ext.MessageBox'],
alias: 'widget.glazeMaterialEditor',
config: {
    scrollable: 'vertical',
    items: [
        {
            xtype: 'titlebar',
            docked: 'top',
            title: 'Edit Glaze Material',
            items: [
                {
                    xtype: 'button',
                    ui: 'action',
                    text: 'Save',
                    itemId: 'saveButton',
                    align: 'right'
                }
            ]
        },
        {
            xtype: 'toolbar',
            docked: 'bottom',
            items: [
                {
                    xtype: 'button',
                    iconCls: 'trash',
                    iconMask: true,
                    itemId: 'deleteButton'
                }
            ]
        },
        { xtype: 'fieldset',
            items: [
                {
                    xtype: 'textfield',
                    name: 'Name',
                    label: 'Name',
                    required: true
                },
                {
                    xtype: 'textareafield',
                    name: 'Description',
                    label: 'Description'
                }
            ]
        }
    ],
    listeners: [
        {
            delegate: '#saveButton',
            event: 'tap',
            fn: 'onSaveButtonTap'
        },
        {
            delegate: '#deleteButton',
            event: 'tap',
            fn: 'onDeleteButtonTap'
        }
    ]
},
onSaveButtonTap: function () {
    console.log('saveGlazeMaterialCommand');
    this.fireEvent('saveGlazeMaterialCommand', this);
},
onDeleteButtonTap: function () {
    console.log('deleteGlazeMaterialCommand');
    this.fireEvent('deleteGlazeMaterialCommand', this);
}
});

我将不胜感激任何帮助。

谢谢，斯特凡

4

1 回答 1

0

如果没有找到，您将需要告诉 ref 它必须创建一个实例。

glazeMaterialEditor: {
    selector: 'glazeMaterialEditor',
    xtype: 'glazeMaterialEditor',
    autoCreate: true
}

有关更多信息，请参阅参考文献

于 2013-06-13T04:44:49.733 回答