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(){
    // ... 

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi