javascript - Extjs set read only for all fields on form on the fly - Stack Overflow

admin管理员组

文章数量:1221386

I am try to write method which set readOnly property for all fields on the form.

My code:

Ext.override(Ext.form.Panel,{

setReadOnlyForAll: function(bReadOnly) {

    this.cascade(function(f) {
      if (f.isFormField) {
         f.setReadOnly(bReadOnly);
      }
    });
});

Invoke this method from Ext.form.Panel:

this.setReadOnlyForAll(false); 

But this method work so slowly.Have somebody an idea how to increase speed? Thank you!

I am try to write method which set readOnly property for all fields on the form.

My code:

Ext.override(Ext.form.Panel,{

setReadOnlyForAll: function(bReadOnly) {

    this.cascade(function(f) {
      if (f.isFormField) {
         f.setReadOnly(bReadOnly);
      }
    });
});

Invoke this method from Ext.form.Panel:

this.setReadOnlyForAll(false); 

But this method work so slowly.Have somebody an idea how to increase speed? Thank you!

• javascript
• extjs

Share Improve this question Follow edited Oct 15, 2012 at 12:29 vedmed asked Oct 15, 2012 at 12:22 vedmedvedmed 35522 gold badges88 silver badges1616 bronze badges

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 7

I was still experiencing a 9 second delay to set ~90 fields as readOnly on a form (with nested forms) with Wilk's suggestion (using ExtJS 4.1.1a).

To improve this further and reduce from 9 seconds to < 1 second I added calls to Ext.suspendLayouts() and Ext.resumeLayouts() globals to allow the framework to batch the component layouts.

Ext.define('My.Panel', {
  extend: 'Ext.form.Panel',

  setReadOnlyForAll: function(readOnly) {
    Ext.suspendLayouts();
    this.getForm().getFields().each(function(field) {
      field.setReadOnly(readOnly);
    });
    Ext.resumeLayouts();
  }
});

cascade checks every child of the current container (such as an Ext.form.Panel) and this means you've to check if the current child is a form field or not. So, use Ext.form.Basic.getFields method to get every form fields:

Ext.define ('Your_form_Panel', {
  extend: 'Ext.form.Panel' ,
  setReadOnlyForAll: function (bReadOnly) {
    this.getForm().getFields().each (function (field) {
      field.setReadOnly (bReadOnly);
    });
  }
});

Further more, I suggest you to use Ext.define instead of Ext.override.

It's simple. Just add this configuration in your Form:

            var formPanel = Ext.create('Ext.form.Panel', {


                fieldDefaults: {
                    labelAlign: 'right',
                    labelWidth: 85,
                    msgTarget: 'side',
                    readOnly : true //all fiels are in readOnly mode
                },

                defaultType: 'textfield',

                items: [{
                        fieldLabel: 'Nome',
                        name: 'nome'
                    }, {
                        fieldLabel: 'Cognome',
                        name: 'cognome'
                    }
                    ]
                }],

            });

本文标签： javascriptExtjs set read only for all fields on form on the flyStack Overflow