1. #1
    Sencha User
    Join Date
    May 2013
    Posts
    5
    Vote Rating
    0
    striemer is on a distinguished road

      0  

    Default Controller unable to get view by xType

    Controller unable to get view by xType


    Hi all,

    I have started implementing a simple Sencha Touch MVC application (with Sencha Touch 2.2.0) which mostly works, but I have trouble getting the controller to instantiate an editor view for items displayed in a list.

    I am referencing the editor via it's xtype but the respective property for the editor instance is "undefined". All solutions I have tried so far have failed.I am using a navigator view to switch between pages.

    This is the app.js source:
    Code:
    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]);
        }
    });
    The part of the navigation controller which displays the list (works fine):
    Code:
        onShowGlazeMaterialsCommand: function () {
            var dashboardView = this.getDashboard();
            dashboardView.push({
               xtype: 'glazeMaterialsList'
            });
        }
    The Controller for handling list and editor for glazes. The problem seems to be the line
    glazeMaterialEditor: 'glazeMaterialEditor', which does not set glazeMaterialEditor to an instance of the editor.

    Code:
    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');
        }
    });
    The editor view:

    Code:
    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);
        }
    });
    I would greatly appreciate any help.

    Thanks,
    Stefan
    Last edited by striemer; 7 Jun 2013 at 6:37 PM. Reason: missing bracket

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,647
    Vote Rating
    899
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    So this line is what doesn't work?

    Code:
            dashboardView.push({
               xtype: 'glazeMaterialsList'
            });
    Do you have that xtype defined somewhere?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    May 2013
    Posts
    5
    Vote Rating
    0
    striemer is on a distinguished road

      0  

    Default


    Hi Mitchell,

    Thanks very much for your reply. The line you have mentioned works (ie. the glazeMaterialsList xtype seems to be defined):

    Code:
    dashboardView.push({           xtype: 'glazeMaterialsList'        });
    The code causing the problem is
    Code:
    glazeMaterialEditor: 'glazeMaterialEditor',
    in the controller definition:
    Code:
    Ext.define('PotApp.controller.GlazeMaterials', {
        extend: 'Ext.app.Controller',
    
        config: {
            refs: {
                glazeMaterialsList: 'glazeMaterialsList',
                glazeMaterialEditor: 'glazeMaterialEditor',
    glazeMaterialsList is set to the correct instance, but glazeMaterialEditor is not, which suggests that the xtype is not defiend.

    The glazeMaterialEditor is defined as follows:

    Code:
    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: {
    
    etc.
    As far as I understand the docs, this line should define the editor xtype ?
    Code:
    alias: 'widget.glazeMaterialEditor',
    Thanks,
    Stefan

  4. #4
    Sencha User
    Join Date
    Apr 2012
    Location
    Billerica, MA
    Posts
    60
    Vote Rating
    9
    jattardi will become famous soon enough

      0  

    Default


    I think you need to define the xtype for your GlazeMaterialEditor view. In the code snippet you posted, there's no xtype defined.

    What you need is this:
    Code:
    Ext.define('PotApp.view.GlazeMaterialEditor', {
        extend: 'Ext.form.Panel',
        xtype: 'glazeMaterialEditor',
        requires: ['Ext.Toolbar', 'Ext.form.FieldSet', 'Ext.form.Text', 'Ext.field.TextArea', 'Ext.MessageBox'],
        alias: 'widget.glazeMaterialEditor'

  5. #5
    Sencha User
    Join Date
    May 2013
    Posts
    5
    Vote Rating
    0
    striemer is on a distinguished road

      0  

    Default


    Hi Jattardi,
    Thanks very much for your answer.

    I thought this would define the xtype:

    Code:
    alias: 'widget.glazeMaterialEditor'
    but will try your suggestion.

    Thanks,
    Stefan

  6. #6
    Sencha User
    Join Date
    May 2013
    Posts
    5
    Vote Rating
    0
    striemer is on a distinguished road

      0  

    Default


    I have added an xtype for GlazeMaterialEditor but I get the same error. Does anyone have an idea what I am doing wrong ?

    Thanks,
    Stefan


  7. #7
    Sencha User
    Join Date
    Apr 2012
    Location
    Billerica, MA
    Posts
    60
    Vote Rating
    9
    jattardi will become famous soon enough

      0  

    Default


    That's odd. I don't see why that wouldn't work. Have you tried removing the alias but keeping the xtype? I'm not sure if that makes a difference, but I've never run into this issue and I don't use the alias.

    Otherwise, perhaps someone else has an idea.

  8. #8
    Sencha User
    Join Date
    May 2013
    Posts
    5
    Vote Rating
    0
    striemer is on a distinguished road

      0  

    Default


    I got it working with help from StackOverflow, autocreate needs to be true:
    Code:
    glazeMaterialEditor: {    
    selector: 'glazeMaterialEditor',    
    xtype: 'glazeMaterialEditor',    
    autoCreate: true}

Thread Participants: 2

Tags for this Thread