1. #1
    Ext User
    Join Date
    Mar 2008
    Posts
    8
    Vote Rating
    1
    diginova is on a distinguished road

      0  

    Default Dynamic readOnly fields!

    Dynamic readOnly fields!


    Hello everybody,
    I'm with a simple problem in EXT and i want know it anyone can help me.
    I have a example with some fields where i want to control everyone in the option to block and unblock edit the fields.
    I have tested the propried readOnly, works fine on the first load, but i need change this about a button called 'Unlock fields'.
    What i need to do to make this operation work? Look the example above:
    HTML Code:
    <html>
    <head>
    <script src="ext/adapter/ext/ext-base.js" type="text/javascript"></script>
    <script src="ext/ext-all.js" type="text/javascript"></script>
    <link href="ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
    <link href="ext/resources/css/xtheme-gray.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
    Ext.onReady(function() {
    Campo1 = new Ext.form.TextField({
    fieldLabel: 'Campo1',
    name: 'Campo1',
    id: 'Campo1',
    readOnly:true,
    width: 260
    });
    Campo2 = new Ext.form.TextField({
    fieldLabel: 'Campo2',
    name: 'Campo2',
    id: 'Campo2',
    readOnly:true,
    width: 260
    });
    Botao1 = new Ext.Button({
    text:'Lock Fields',
    handler:function(){
    Campo2.readOnly = true;
    Campo1.readOnly = true;
    }
    });
    Botao2 = new Ext.Button({
    text:'Unlock Fields',
    handler:function(){
    Campo2.readOnly = false;
    Campo1.readOnly = false;
    }
    });
     
    var FormPanel = new Ext.FormPanel({
    frame:true,
    items:[Campo1,Campo2],
    buttons:[Botao1,Botao2]
    });
    FormPanel.render('Conteudo');
    });
    </script>
    </head>
    <body>
    <br><br>
    <div id="Conteudo" ></div>
    </body>
    </html>
    Last edited by hendricd; 7 Jul 2008 at 3:35 PM. Reason: wrap your code/markup in [html/] or [code/] tags

  2. #2
    Ext User
    Join Date
    May 2008
    Posts
    110
    Vote Rating
    0
    illuminum is on a distinguished road

      0  

    Default


    what do you mean by "i want to control everyone in the option to block and unblock edit the fields"?

    Also, it helps if your code is readable:
    Code:
    Ext.onReady(function() {
        Campo1 = new Ext.form.TextField({
            fieldLabel: 'Campo1',
            name: 'Campo1',
            id: 'Campo1',
            readOnly: true,
            width: 260
        });
        Campo2 = new Ext.form.TextField({
            fieldLabel: 'Campo2',
            name: 'Campo2',
            id: 'Campo2',
            readOnly: true,
            width: 260
        });
        Botao1 = new Ext.Button({
            text: 'Lock Fields',
            handler: function() {
                Campo2.readOnly = true;
                Campo1.readOnly = true;
            }
        });
        Botao2 = new Ext.Button({
            text: 'Unlock Fields',
            handler: function() {
                Campo2.readOnly = false;
                Campo1.readOnly = false;
            }
        });
    
        var FormPanel = new Ext.FormPanel({
            frame: true,
            items: [Campo1, Campo2],
            buttons: [Botao1, Botao2]
        });
        FormPanel.render('Conteudo');
    });
    You can copy-paste your code into a "beautifier" to make it so: http://98.212.231.100/assets/beautify/

  3. #3
    Ext User
    Join Date
    Mar 2008
    Posts
    8
    Vote Rating
    1
    diginova is on a distinguished road

      0  

    Default


    Sorry about the english!
    But i want to unlock and lock (readOnly) the fields on a button click!
    The option disabled don't work for me, must be the readOnly.

    It's possible?

  4. #4
    Ext User Starfall's Avatar
    Join Date
    Jan 2008
    Location
    Moscow, Russian Federation
    Posts
    158
    Vote Rating
    0
    Starfall is on a distinguished road

      0  

    Default


    You can access underlying elements of Fields (I mean those <inputs>) and change their readonly property just like any DOM property

  5. #5
    Sencha User
    Join Date
    Nov 2007
    Location
    London, UK
    Posts
    583
    Vote Rating
    0
    mabello is on a distinguished road

      0  

    Default


    Yeah,
    I know very well your problem.
    I had the same issue, and I had to create this plugin to achieve my goal:

    PHP Code:
    Ext.ux.FieldReadOnlyPlugin = function(){
        
        
    this.init = function(f){
             
    f.setReadOnly = function(value){
                if(
    f.readOnly)//if setted readonly in the Ext way, like in cfg object, do not take any action.
                    
    return;
                
    f._readOnly value;
                if(
    f.rendered){
                    if(
    Ext.ux.Utility.isNullOrUndefined(f.editable) || f.editable === true){
                        var 
    el f.getEl();
                        
    el.dom.setAttribute('readOnly'value);
                        
    el.dom.readOnly value;
                    }
                }
             };
            
            if(
    Ext.ux.Utility.isFunction(f.expand))
                
    f.expand f.expand.createInterceptor(function(){
                    return !
    f._readOnly;      
                }); 
            if(
    Ext.ux.Utility.isFunction(f.onTriggerClick))
                
    f.onTriggerClick f.onTriggerClick.createInterceptor(function(){
                    return !
    f._readOnly;      
                });
            if(
    Ext.ux.Utility.isFunction(f.onClick))
                
    f.onClick f.onClick.createInterceptor(function(){
                    if(
    f._readOnly){
                        
    this.el.dom.checked f.checked;
                    }
                    return !
    f._readOnly;      
                });
            if(
    Ext.ux.Utility.isFunction(f.setValue) && instanceof Ext.form.Checkbox)
                
    f.setValue f.setValue.createInterceptor(function(){ 
                    return !
    f._readOnly;      
                }); 
        }

    And an example of use:
    PHP Code:
    var savePassword = new Ext.form.Checkbox({

                    
    xtype:'checkbox',

                    
    plugins: [new Ext.ux.FieldReadOnlyPlugin()],

    ...

                });

    savePassword .setReadOnly(true); 
    If you want more info about the problem I have solved with this plugin, and why I had to create it, check this out
    http://extjs.com/forum/showthread.php?p=175972

    I would say that an extension could be better in this case, but I had to use a plugin...

    I hope this helps

  6. #6
    Ext User
    Join Date
    Sep 2008
    Location
    FRANCE, Rennes
    Posts
    68
    Vote Rating
    0
    stevanovich is on a distinguished road

      0  

    Lightbulb What about working with readOnly ?

    What about working with readOnly ?


    Hi,

    If you wish to work with true readOnly value (instead _readOnly).

    PHP Code:
    Ext.ux.FieldReadOnlyPlugin = function(){
        
    this.init = function(f){
             
    f.setReadOnly = function(value){
                if(
    f.rendered){
            if(
    f.readOnly != value){
                        var 
    el f.getEl();
                        
    el.dom.setAttribute('readOnly'value);
                        
    el.dom.readOnly value;
                
    f.readOnly value;
                }
                } else {
            
    f.readOnly value;
            }
             };
            
            if(
    Ext.ux.Utility.isFunction(f.expand))
                
    f.expand f.expand.createInterceptor(function(){
            
    //alert('expand'+'\n'+'Rendered:'+f.rendered+'\n'+'f.readOnly:'+f.readOnly+'\n'+'f._readOnly:'+f._readOnly+'\n');
                    
    return !f.readOnly;      
                }); 
            if(
    Ext.ux.Utility.isFunction(f.onTriggerClick))
                
    f.onTriggerClick f.onTriggerClick.createInterceptor(function(){
            
    //alert('onTriggerClick'+'\n'+'Rendered:'+f.rendered+'\n'+'f.readOnly:'+f.readOnly+'\n'+'f._readOnly:'+f._readOnly+'\n');
                    
    return !f.readOnly;      
                });
            if(
    Ext.ux.Utility.isFunction(f.onClick))
                
    f.onClick f.onClick.createInterceptor(function(){
            
    //alert('onClick'+'\n'+'Rendered:'+f.rendered+'\n'+'f.readOnly:'+f.readOnly+'\n'+'f._readOnly:'+f._readOnly+'\n');
                    
    if(f.readOnly){
                        
    this.el.dom.checked f.checked;
                    }
                    return !
    f.readOnly;      
                });
            if(
    Ext.ux.Utility.isFunction(f.setValue) && instanceof Ext.form.Checkbox)
                
    f.setValue f.setValue.createInterceptor(function(){ 
            
    //alert('instanceOf'+'\n'+'Rendered:'+f.rendered+'\n'+'f.readOnly:'+f.readOnly+'\n'+'f._readOnly:'+f._readOnly+'\n');
                    
    return !f.readOnly;      
                }); 
        }


  7. #7
    Ext User
    Join Date
    Mar 2009
    Posts
    87
    Vote Rating
    0
    Abisha is on a distinguished road

      0  

    Default


    When i am using this script getting an error

    Ext.ux.Utility undefined

    Can you please explain the prob? where i am doing mistake?
    Abisha.M.G.
    Zen-E-Solutions
    Chennai.

  8. #8
    Sencha User fay's Avatar
    Join Date
    Apr 2007
    Location
    Ireland
    Posts
    1,750
    Vote Rating
    9
    fay will become famous soon enough fay will become famous soon enough

      0  

    Default


    Are you just copying the above code "as is"?

    See: Ext.ux.FieldReadOnlyPlugin for the entirety of the code.

    PHP Code:
    Ext.namespace('Ext.ux');
    //Utility class
    if(!Ext.ux.Utility)    
      
    Ext.ux.Utility = {        
        
    isNullOrUndefined: function(obj) {            
          return (
    typeof obj == 'undefined' || obj == null );        
        },        
        
    isFunction: function(f){            
          return 
    typeof f == 'function';        
        }            
      };

    Ext.ux.FieldReadOnlyPlugin = function(){
    // ...