Announcement

Collapse
No announcement yet.

Best practice to validate grid panel filter fields

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Best practice to validate grid panel filter fields

    I've struggled with this for awhile, thought I'd see what you guys think. On most grid panels, you have fields to submit values to server to select what shows in grid. I've coded fields with some validation, min/max for number, max length for char fields, etc. The field turns red to show it is invalid but user can still trigger submission to server, where you get data decimal errors or something that kills CGI job.

    On a normal form panel submission, I'll code whether form isValid before submitting to server. Is there an equivalent method for grid panel I can put in beforeLoad function or do I have to test each field individually for validity before allowing submit?

  • #2
    When you say you have "submit values" to select are you talking about filter fields in the top toolbar above the grid? Posting a screen shot would help a lot.

    Comment


    • #3
      Ha! If I knew how to post a screen shot in this kind of forum. Johnny recently just told me about your code tags. :-) But yes Richard, the fields you would put in toolbar on the grid panel. I didn't think that would qualify as a "form" to use isValid against the object itself.

      Comment


      • #4
        Before reloading the grid store just check isValid for each field in the toolbar: https://docs.sencha.com/extjs/6.2.1/...method-isValid

        Comment


        • #5
          Here is a quick and dirty Sencha Fiddle checking if the fields are valid in a toolbar.

          Example Source :
          Code:
          Ext.application({
              name: 'Fiddle',
          
              launch: function () {
                  Ext.create('Ext.data.Store', {
                      storeId: 'simpsonsStore',
                      fields: ['name', 'email', 'phone'],
                      data: [{
                          name: 'Lisa',
                          email: 'lisa@simpsons.com',
                          phone: '555-111-1224'
                      }, {
                          name: 'Bart',
                          email: 'bart@simpsons.com',
                          phone: '555-222-1234'
                      }, {
                          name: 'Homer',
                          email: 'homer@simpsons.com',
                          phone: '555-222-1244'
                      }, {
                          name: 'Marge',
                          email: 'marge@simpsons.com',
                          phone: '555-222-1254'
                      }]
                  });
          
                  Ext.create('Ext.grid.Panel', {
                      title: 'Simpsons',
                      store: Ext.data.StoreManager.lookup('simpsonsStore'),
                      dockedItems: [{
                          xtype: 'toolbar',
                          dock: 'top',
                          defaults: {
                              labelAign: 'left',
                              labelSeparator: '',
                              labelWidth: 50
                          },
                          items: [{
                              xtype: 'textfield',
                              name: 'field1',
                              fieldLabel: 'Field 1',
                              allowBlank: false
                          }, {
                              xtype: 'numberfield',
                              name: 'field2',
                              fieldLabel: 'Field 2',
                              allowBlank: false,
                              maxValue: 5,
                              minValue: 1
                          }, '->', {
                              xtype: 'button',
                              text: 'Submit',
                              handler: function (cmp) {
                                  // call the backend if the fields in the toolbar are
                                  //  valid
                                  //
                                  var toolbar = cmp.up('toolbar'),
                                      fields = toolbar.query('field'),
                                      fieldsValid = true,
                                      fieldValues = {},
                                      ii, field;
          
                                  // check all the fields in the toolbar
                                  //
                                  for (ii = 0; ii < fields.length; ii++) {
                                      field = fields[ii];
                                      if (field.isValid()) {
                                          // since the field is valid save off the value
                                          //
                                          fieldValues[field.name] = field.getValue();
                                      } else {
                                          fieldsValid = false;
                                      }
                                  }
          
                                  if (fieldsValid) {
                                      // this were you could call the backend since the
                                      //  fields are valid
                                      //
                                      Ext.Msg.alert('Fields Valid', 'Can call the backend.');
                                      console.log(fieldValues);
                                  } else {
                                      Ext.Msg.alert('Fields Invalid', 'Can not call the backend.');
                                  }
                              }
                          }]
                      }],
                      columns: [{
                          text: 'Name',
                          dataIndex: 'name'
                      }, {
                          text: 'Email',
                          dataIndex: 'email',
                          flex: 1
                      }, {
                          text: 'Phone',
                          dataIndex: 'phone'
                      }],
                      height: 400,
                      width: 600,
                      renderTo: Ext.getBody()
                  });
              }
          });

          Comment


          • #6
            Ahhhh. Thanks Johnny. That is identical technique I use (which came from you) to test if form fields are dirty if user tries to exit without saving. That will keep me from writing IF statement for each field individually, which is only idea I had. I knew there was better way. Thanks again to you and Richard for responding so quickly. Now I just have to retrofit this into the 100+ programs I've already written before I realized my mistake here. :-(

            Comment

            Working...
            X