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
    36,754
    Vote Rating
    827
    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
    56
    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
    56
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..."