表單驗證未在ExtJS的

Question

工作，我想驗證添加到使用formBind我的表格：真

驗證雖然不存在的（保存按鈕沒有灰色）。確認文本字段不是空白的，但將其綁定到保存按鈕似乎什麼也不做。

如果您雙擊一條記錄，它將顯示有問題的表單。這可以在這裏看到：下面

http://jsfiddle.net/byronaltice/7yz9oxf6/32/

代碼的情況下，任何人都無法訪問的jsfiddle：

Ext.application({ 
    name: 'MyApp', 
    launch: function() { 

     //Popup form for items in grid panel 
     Ext.define("SessionForm", { 
      extend: 'Ext.window.Window', 
      alias: 'widget.sessionForm', 
      padding: 5, 
      width: 600, 
      title: 'Edit Sessions', 
      model: 'true', 
      items: [{ 
       xtype: 'form', 
       bodyPadding: 10, 
       title: '', 
       items: [{ 
        xtype: 'textfield', 
        name: 'title', 
        fieldLabel: 'Title', 
        labelWidth: 90, 
        defaults: { 
         labelWidth: 90, 
         margin: '0 0 10 0', 
         anchor: '90%' 
        }, 
        allowBlank: false 
       }, { 
        xtype: 'checkboxfield', 
        name: 'approved', 
        fieldLabel: 'Approved' 
       }] 

      }, { 
       xtype: 'container', 
       padding: '10 10 10 10', 
       layout: { 
        type: 'hbox', 
        align: 'middle', 
        pack: 'center' 
       }, 
       items: [{ 
        xtype: 'button', 
        text: 'Save', 
        formBind: 'true', 
        margin: '5 5 5 5', 
        handler: function (button) { 
         var form = button.up().up().down('form'); 
         form.updateRecord(); 
         button.up('window').destroy(); 
        } 
       }, { 
        xtype: 'button', 
        text: 'Cancel', 
        margin: '5 5 5 5', 
        handler: function (button) { 
         button.up('window').destroy(); 
        } 
       }] 
      }] 
     }); 

     //The grid panel area 
     Ext.define("SessionGridPanel", { 
      extend: 'Ext.grid.Panel', 
      alias: 'widget.sessionGridPanel', 

      listeners: { 
       itemdblclick: function (gridpanel, record, item, e) { 
        var formWindow = Ext.create('SessionForm'); 
        formWindow.show(); 
        var form = formWindow.down('form'); 
        form.loadRecord(record); 
       } 
      }, 

      store: { 
       fields: [ 
        'id', { 
        name: 'title', 
        sortType: 'asUCText' 
       }, 
        'approved', { 
        dateFormat: 'c', 
        name: 'sessionTimeDateTime', 
        sortType: 'asDate', 
        type: 'date' 
       }, { 
        convert: function (v, rec) { 
         var convertIt = Ext.util.Format.dateRenderer('m/d/Y g:i a'), 
          pretty = convertIt(rec.get("sessionTimeDateTime")); 
         return pretty; 
        }, 
        name: 'sessionTimePretty', 
        type: 'string' 
       }], 
       autoLoad: true, 
       autoSync: true, 
       data: [{ 
        id: 101, 
        sessionTimeDateTime: '2014-08-27T21:00:00.000+0000', 
        title: 'JS for D', 
        approved: true 
       }, { 
        id: 102, 
        sessionTimeDateTime: '2014-10-27T22:30:00.000+0000', 
        title: 'CS for S', 
        approved: false 
       }, { 
        id: 105, 
        sessionTimeDateTime: '2014-09-27T20:30:00.000+0000', 
        title: 'XxtJS for E', 
        approved: false 
       }, { 
        id: 104, 
        sessionTimeDateTime: '2014-09-26T22:00:00.000+0000', 
        title: 'ZXxtJS for E', 
        approved: true 
       }, { 
        id: 103, 
        sessionTimeDateTime: '2014-09-26T22:00:00.000+0000', 
        title: 'ExtJS for E', 
        approved: true 
       }], 
       sorters: [{ 
        property: 'title' 
       }], 
       groupField: 'sessionTimeDateTime' 
      }, 
      columns: [{ 
       xtype: 'gridcolumn', 
       dataIndex: 'id', 
       text: 'Id' 
      }, { 
       xtype: 'gridcolumn', 
       dataIndex: 'title', 
       text: 'Title', 
       flex: 1, 
       minWidth: 100, 
       width: 75 
      }, { 
       xtype: 'gridcolumn', 
       dataIndex: 'approved', 
       text: 'Approved' 
      }, { 
       dataIndex: 'sessionTimePretty', 
       text: 'Session Start Time', 
       width: 180 
      }], 
      features: [{ 
       ftype: 'grouping', 
       groupHeaderTpl: [ 
        '{[values.rows[0].get(\'sessionTimePretty\')]} (Session Count: {rows.length})'] 
      }] 
     }); 

     Ext.create('Ext.container.Viewport', { 
      layout: { 
       type: 'border' 
       //align: 'stretch' 
      }, 
      items: [{ 
       region: 'west', 
       layout: { 
        type: 'vbox', 
        align: 'stretch' 
       }, 
       flex: 1, 
       split: true, 
       items: [{ 
        xtype: 'sessionGridPanel', 
        flex: 1 
       }, { 
        xtype: 'splitter', 
        width: 1 
       }, { 
        html: '<b>Speakers Panel</b>', 
        flex: 1, 
        xtype: 'panel' 
       }] 
      }, { 
       region: 'center', 
       html: '<b>Details Panel</b>', 
       flex: 1, 
       xtype: 'panel', 
       title: 'Details Panel', 
       collapsible: true, 
       collapsed: true, 
       collapseDirection: 'right' 
      }] 
     }); 
    } 
}); 

Answer 1

從煎茶API文檔：

的FormPanel中內任何組件都可以使用formBind：true進行配置。

問題是你使用的表單組件外formBind屬性

您可以校正這種方式代碼：

Ext.define("SessionForm", { 
    extend: 'Ext.window.Window', 
    alias: 'widget.sessionForm', 
    // ... 
    items: [{ 
     xtype: 'form', 
     items: [{ 
      // your form items 
     }], 
     buttons: [{ 
      xtype: 'button', 
      text: 'Save', 
      formBind: true, 
      handler: function (button) { 
       // also you should rewrite the following line 
       // to make it independant from the components structure 
       var form = button.up().up().down('form'); 
       form.updateRecord(); 
       button.up('window').destroy(); 
      } 
     }, { 
      xtype: 'button', 
      text: 'Cancel', 
      handler: function (button) { 
       button.up('window').destroy(); 
      } 
     }] 
    }] 
}); 

你撥弄改變：http://jsfiddle.net/7yz9oxf6/34/