Sencha 中的验证无法正常工作

Question

我是 Sencha 的新手，所以基本上我在验证中遇到问题 这是我的代码

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

});

我想验证标题和叙述，但问题是当我点击保存按钮时只有标题正常工作，而没有为叙述分配任何值，然后它在不检查叙述的验证条件的情况下保存。

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

下面我正在检查每个字段的验证

Ext.define("PlayListApp.controller.Plays", { 扩展：“Ext.app.Controller”， 配置：{ 参考：{ // 我们将通过 xtype 查找我们的视图。 notesListView: "播放列表视图", noteEditorView: "playeditorview", 笔记列表：“#notesList” }, 控制： { 笔记列表视图：{ // 笔记列表容器触发的命令。 newNoteCommand: "onNewNoteCommand", editNoteCommand: "onEditNoteCommand" }, 注意编辑器视图：{ // 注释编辑器触发的命令。 saveNoteCommand: "onSaveNoteCommand", deleteNoteCommand: "onDeleteNoteCommand", backToHomeCommand：“onBackToHomeCommand” } } }, onSaveNote 命令：函数（）{ //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 错误 = currentNote.validate(); 味精=''; if (!errors.isValid()) { //Ext.Msg.alert('等一下！','请填写所有字段',Ext.emptyFn); //Ext.Msg.alert('Wait!', errors.getByField("title")[0].getMessage(), Ext.emptyFn); 错误。每个（函数（错误）{ 味精 += err.getMessage() + '
'; }); // 每个（） Ext.Msg.alert('错误！', msg); currentNote.reject(); 返回; } var notesStore = Ext.getStore("Notes"); //notesStore.sync(); //notesStore.sort([{ property: 'dateCreated', direction: 'DESC'}]); this.activateNotesList(); },

Answer 1

我已针对您的问题做了一些工作，但通过在“PlayListApp.controller.Plays”中添加自定义验证。 现在“叙述”字段的长度不会超过 3 位数。 用户也不能输入负数。

您必须在两个文件中进行更改：-

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

这里是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();
},

希望这对您有所帮助。
如果这不是您想要的，请再次说明您的要求。
再见。

Answer 2

在 PlayController 中，onSaveNoteCommand 被调用，但我得到了 currentNote 的空值，这导致应用程序死机。

var currentNote = noteEditor.getRecord(); // 总是返回 null !?

我向Sencha Fiddle 添加了警报。 noteEditor 有一个值。