1. #1
    Sencha User
    Join Date
    Sep 2011
    Posts
    27
    Answers
    3
    Vote Rating
    0
    arcan9ne is on a distinguished road

      0  

    Question Unanswered: FormPanel monitorValid and button formBind not working in ExtJS 4?

    Unanswered: FormPanel monitorValid and button formBind not working in ExtJS 4?


    Good day all,

    I have a piece of code that I converted from 3.0 to 4.0 which utilized the monitorValid: true on the form and formBind: true on the button. Perhaps I'm missing something from the update, but I checked the documentation and did not see the monitorValid config (on the FormPanel). Below is my code for the form and any help would be much appreciated (I've tried extending Ext.FormPanel after trying Ext.form.Panel):

    Code:
    Ext.define('APP.form.add_inventory', {
      extend: 'Ext.FormPanel',
      alias: 'widget.add_inventory_frm',
      
      initComponent:function() {
        var config = {
          border: true,
          bodyStyle: 'padding: 5px;',
          buttonAlign: 'center',
          labelAlign: 'right',
          labelWidth: 90,
          monitorValid: true,
          stateful: false,
          layout:'column',
          items: [{
            itemId: 'column_1',
            border: false,
            items: [{
              xtype: 'textfield', 
              itemId:'inventory_name',
              fieldLabel: 'Name',
              width: 300,
              maxLength: 50,
              allowBlank: false
            },{
              xtype: 'inventory_status_cmb', 
              itemId:'inventory_status_id'
            },{
              xtype: 'numberfield', 
              itemId:'quantity',
              fieldLabel: 'Quantity',
              width: 150
            },{
              xtype: 'numberfield', 
              itemId:'units',
              fieldLabel: 'Units',
              width: 150
            },{
              xtype: 'tabpanel',
              layout: 'fit',
              border: false,
              plain: true,
              items: [{
                title: 'Description',
                xtype: 'htmleditor',
                hideLabel: true
              }]
            }]
          }],
          buttons: [{
            text: 'Save',
            formBind: true,
            disabled: true,
            tooltip: 'Save',
            handler: function(){
              if (this.findParentByType('form').getForm().isValid()) {
                // post the form
              } else {
                Ext.Msg.show({
                  title: 'Error',
                  msg:Ext.util.Format.ellipsis('testing error', 2000),
                  icon:Ext.Msg.ERROR,
                  buttons:Ext.Msg.OK,
                  minWidth:1200 > String('testing error').length ? 360 : 600
                });
              }
            }
          },{
            text: 'Cancel',
            handler: function(){
              var w = this.findParentByType('window');
              w.close();
            }
          }]
        }
        
        Ext.apply(this, Ext.apply(this.initialConfig, config));
        
        APP.form.add_inventory.superclass.initComponent.apply(this, arguments);
      }
    });
    Once again, your help is much appreciated.

  2. #2
    Sencha User
    Join Date
    May 2008
    Posts
    17
    Vote Rating
    0
    ktilt is on a distinguished road

      0  

    Default


    The monitorValid config was removed in 4.x for performance reasons. I too would like to know what people are doing in 4.x as a substitute for disabling a form submit button until all fields are valid.

  3. #3
    Sencha User
    Join Date
    Sep 2011
    Posts
    27
    Answers
    3
    Vote Rating
    0
    arcan9ne is on a distinguished road

      0  

    Default


    Still, it is strange because in the API Documentation, their Ext.form.FormPanel example utilizes formBind: true on the button leading me to believe that it should work..

    My alternative is in my code, check whether the form is valid, and if not, display an error message. That being said, would be less code if I only needed to include formBind: true on the button.

  4. #4
    Sencha User
    Join Date
    Jun 2009
    Posts
    102
    Answers
    8
    Vote Rating
    6
    campersau1 is on a distinguished road

      0  

    Default


    Take a look at this example: http://docs.sencha.com/ext-js/4-0/#!...istration.html
    It uses these listeners:
    Code:
            listeners: {
                fieldvaliditychange: function() {
                    this.updateErrorState();
                },
                fielderrorchange: function() {
                    this.updateErrorState();
                }
            },
    on the form panel.Maybe this helps!

  5. #5
    Sencha Premium Member dawesi's Avatar
    Join Date
    Mar 2007
    Location
    Melbourne, Australia (aka GMT+10)
    Posts
    1,083
    Answers
    24
    Vote Rating
    44
    dawesi has a spectacular aura about dawesi has a spectacular aura about

      1  

    Default


    You could put money on it being removed as part of the overhaul of the forms ecosystem. (which I may say is much better)

    The developers need to PUT FORMBIND BACK, regardless of how well it performs. They just have to put it in the docs that it has performance issues, then people can made a decision for themselves.

    Sencha need to focus more on the community, rather than their wishlist. Version 4.0.6+ is still beta in reality and is missing lots of things like this that we use everyday (but some nazi doesn't care about).

    It's getting there, but not yet production ready IMHO.
    Teahouse Training Company
    Official Certified Sencha Trainer

    Australia / New Zealand / Singapore / Hong Kong & APAC



    SenchaWorld.com - Sencha webinars, videos, etc
    SenchaForge.org - (coming soon)
    TeahouseHQ.com - Sencha ecosystem training portal

    Code Validation : JSLint | JSONLint | JSONPLint

  6. #6
    Ext JS Premium Member twaindev's Avatar
    Join Date
    Sep 2009
    Posts
    223
    Answers
    15
    Vote Rating
    3
    twaindev is on a distinguished road

      1  

    Default


    Using a xtype: 'form' and a button with formBind: true in a buttons (or fbar/tbar/bbar) config still works fine for me. Even without the monitorValid config.

    Code:
    Ext.onReady(function() {
        var window = new Ext.window.Window({
            title: 'Login',
            renderTo: Ext.getBody(),
            items:[{
                xtype:'form',
                width: 500,
                bodyPadding: 10,
                layout: 'anchor',
                defaults: {
                    labelWidth: 130,
                    anchor: '100%'
                },
                items:[{
                    xtype:'textfield',
                    fieldLabel: 'Username',
                    allowBlank: false
                }, {
                    xtype:'textfield',
                    fieldLabel: 'Password',
                    allowBlank: false
                }],
                buttons: [{
                    text: 'Login',
                    formBind: true
                },{
                    text: 'Cancel'
                }]
            }]
        });
        window.show();
    });
    The buttons config must be specified for the form not for the window. Otherwise it does not work.