Validation is not working properly in Sencha

Question

I am new in Sencha so bascially I am getting problem in Validation Here is my code

Ext.define("PlayListApp.view.PlayEditor", {
    extend: "Ext.form.Panel",
    requires: "Ext.form.FieldSet",
    alias: "widget.playeditorview",
     config:{ 
        scrollable: 'vertical',
        items: [
            {
                xtype: "toolbar",
                docked: "top",
                title: "Edit PlayList",
                items: [
                    {
                        xtype: "button",
                        ui: "action",
                        iconCls:"home",
                        iconMask:true,
                        itemId: "backButton"
                    },
                    { xtype: "spacer" },
                    {
                        xtype: "button",
                        ui: "action",
                        iconCls:"compose",
                        iconMask:true,
                        itemId: "saveButton"
                    }
                ]
            },
            {
                xtype: "toolbar",
                docked: "bottom",
                items: [
                    {
                        xtype: "button",
                        iconCls: "trash",
                        iconMask: true,
                        itemId: "deleteButton"
                    }
                ]
            },
            { xtype: "fieldset",
                items: [
                    {
                        xtype: 'textfield',
                        name: 'title',
                        label: 'Link',
                        placeHolder: 'http://yousite.com',
                        required: true,

                    },
                    {
                        xtype: 'numberfield',
                        name: 'narrative',
                        label: 'Duration',
                        placeHolder:'99',  
                        required:true
                    }
                ]


            }
        ],
 listeners: [
            {
                delegate: "#backButton",
                event: "tap",
                fn: "onBackButtonTap"
            },
            {
                delegate: "#saveButton",
                event: "tap",
                fn: "onSaveButtonTap"
            },
            {
                delegate: "#deleteButton",
                event: "tap",
                fn: "onDeleteButtonTap"
            },


        ]
    },

  onSaveButtonTap: function () {
        //console.log("saveNoteCommand");
        this.fireEvent("saveNoteCommand", this);
    },
    onDeleteButtonTap: function () {
        //console.log("deleteNoteCommand");
        this.fireEvent("deleteNoteCommand", this);
    },
    onBackButtonTap: function () {
        //console.log("backToHomeCommand");
        this.fireEvent("backToHomeCommand", this);
    }

});

I want to validate both title and narrative but the problem is that only title is working properly when I click on save button wihout assigning any value to narrative then it saves without checking validation condition of narrative.

Ext.define("PlayListApp.model.Play", {
    extend: "Ext.data.Model",
    config: {
        idProperty: 'id',
        fields: [
            { name: 'title', type: 'string' },
            { name: 'narrative', type: 'int'}
        ],
        validations: [
            { type: 'presence', field: 'title', message: 'Please enter a link in playlist.' },//This validation only works
            { type: 'presence', field: 'narrative', message:  'Please enter duration in playlist'},
            { type: 'length', field:'narrative', min:'1', max:'3', message:'Please enter digit between 1 and 3'}
        ]
    }
});

Here below I am checking the validation of each field

Ext.define("PlayListApp.controller.Plays", {

    extend: "Ext.app.Controller",
    config: {
        refs: {
            // We're going to lookup our views by xtype.
            notesListView: "playslistview",
            noteEditorView: "playeditorview",
            notesList: "#notesList"
        },
        control: {
            notesListView: {
                // The commands fired by the notes list container.
                newNoteCommand: "onNewNoteCommand",
                editNoteCommand: "onEditNoteCommand"
            },
            noteEditorView: {
        // The commands fired by the note editor.
                 saveNoteCommand: "onSaveNoteCommand",
                 deleteNoteCommand: "onDeleteNoteCommand",
                 backToHomeCommand: "onBackToHomeCommand"
        }
        }
    },  

    onSaveNoteCommand: function () {

        //console.log("onSaveNoteCommand");

        var noteEditor = this.getNoteEditorView();

        var currentNote = noteEditor.getRecord();
        var newValues = noteEditor.getValues();

        // Update the current note's fields with form values.
        currentNote.set("title", newValues.title);
        currentNote.set("narrative", newValues.narrative);

        var errors = currentNote.validate();
        msg='';
        if (!errors.isValid()) {
            //Ext.Msg.alert('Wait!','Please fill all the fields',Ext.emptyFn);
            //Ext.Msg.alert('Wait!', errors.getByField("title")[0].getMessage(), Ext.emptyFn);
            errors.each(function (err) {
                                            msg += err.getMessage() + '
';
                                        }); // each()
                                        Ext.Msg.alert('ERROR!', msg);                              
            currentNote.reject();
            return;
        }

        var notesStore = Ext.getStore("Notes");



        //notesStore.sync();

        //notesStore.sort([{ property: 'dateCreated', direction: 'DESC'}]);

        this.activateNotesList();
    },

Answer 1

I have done some work on your problem but by adding custom validation in "PlayListApp.controller.Plays". Now the length of the 'narrative' field will not exceed 3 digits. Also user can't enter negative number.

You have to make changes in two files :-

1) "PlayListApp.model.Play"
2) "PlayListApp.controller.Plays"

 // "PlayListApp.model.Play"

   Ext.define("PlayListApp.model.Play", {
extend: "Ext.data.Model",
config: {
    idProperty: 'id',
    fields: [
        { name: 'title', type: 'string' },
        { name: 'narrative', type: 'int'}
    ],
    validations: [
        { type: 'presence', field: 'title', message: 'Please enter a link in playlist.' },//This validation only works
        { type: 'presence', field: 'narrative', message:  'Please enter duration in playlist'},
        { type: 'presence', field: 'narrative', message: 'Enter a number for this note.' }
    ]
}
});

Here is the controller.js - "PlayListApp.controller.Plays"

Ext.define("PlayListApp.controller.Plays", {

extend: "Ext.app.Controller",
config: {
    refs: {
        // We're going to lookup our views by xtype.
        notesListView: "playslistview",
        noteEditorView: "playeditorview",
        notesList: "#notesList"
    },
    control: {
        notesListView: {
            // The commands fired by the notes list container.
            newNoteCommand: "onNewNoteCommand",
            editNoteCommand: "onEditNoteCommand"
        },
        noteEditorView: {
    // The commands fired by the note editor.
             saveNoteCommand: "onSaveNoteCommand",
             deleteNoteCommand: "onDeleteNoteCommand",
             backToHomeCommand: "onBackToHomeCommand"
    }
    }
},  

onSaveNoteCommand: function () {

    //console.log("onSaveNoteCommand");

    var noteEditor = this.getNoteEditorView();

    var currentNote = noteEditor.getRecord();
    var newValues = noteEditor.getValues();

   currentNote.set("title",newValues.title);
    currentNote.set("narrative", newValues.narrative);
    var errors = currentNote.validate();

    if (!errors.isValid()) {
        //Ext.Msg.alert('', errors.getByField("title")[0].getMessage(), Ext.emptyFn);
        errors.each(function (err) {
                                        msg += err.getMessage() + '<br>';
                                    }); // each()
                                    Ext.Msg.alert('ERROR!', msg);
        currentNote.reject();
        return;
    }

       // checking for negative number
    if(newValues.narrative<="0")
    {
      Ext.Msg.alert('','Choose number greater than 0');
      currentNote.reject();
      return;
    }
       // checking for value greater than 3-digit number
    if(newValues.narrative>"999")
    {
      Ext.Msg.alert('','Length should not be greater than THREE');
      currentNote.reject();
      return;
    }


    var notesStore = Ext.getStore("Notes");

    //notesStore.sync();

    //notesStore.sort([{ property: 'dateCreated', direction: 'DESC'}]);

    this.activateNotesList();
},

Hope this helps you.
If this is not what you wanted , explain your requirement once again.
Bye.

Answer 2

In the PlayController, onSaveNoteCommand gets called but I'm getting a null value for currentNote, which is causing the app to die.

  var currentNote = noteEditor.getRecord(); // Always returns null !?

I added an alert to the Sencha Fiddle. noteEditor has a value.