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'
    });
}

glaze のリストとエディターを処理するためのコントローラー。問題は 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

インスタンスが見つからない場合は、インスタンスを作成する必要があることを参照に伝える必要があります。

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

詳細については参考文献を参照してください

于 2013-06-13T04:44:49.733 に答える