1. #1
    Sencha User rmiclon's Avatar
    Join Date
    Aug 2011
    Posts
    11
    Vote Rating
    0
    rmiclon is on a distinguished road

      0  

    Question Unanswered: Populated Form that can toggle between editable and readonly

    Unanswered: Populated Form that can toggle between editable and readonly


    Hello All,
    I am fairly new to Extjs. I am building a pretty complex application for a newbie. I have a grid that is populated with data (obviously) when I click on my button 'edit' it pops up a window with a form that gets populated with the record that was selected. I also have a button called 'view'. I would like the same form to pop up but in a readonly fashion.

    I am using MVC for my functions and view controls. I am thinking that there needs to be a separate button function for both edit and view and somewhere in the view function is were I can declare that the form be readonly upon show. Am I even close to being right?

    I really an not that great with the MVC structure yet so every little bit will be helpfull.

    Thank you!

  2. #2
    Sencha User rmiclon's Avatar
    Join Date
    Aug 2011
    Posts
    11
    Vote Rating
    0
    rmiclon is on a distinguished road

      0  

    Default Still need assistance

    Still need assistance


    Anyone?

  3. #3
    Sencha User lucasguaru's Avatar
    Join Date
    May 2011
    Location
    Guaruj√°, Brazil
    Posts
    77
    Answers
    9
    Vote Rating
    2
    lucasguaru is on a distinguished road

      0  

    Default


    I don't know if there's a rule for this.
    I have something similar to this.
    I look for a permission for each field.
    What I did was create a plugin and created all my fields with this plugin.
    This plugin register himself into the component render.
    When it's has being rendered, it looks for the form to see what's necessary to confirm if the component(field) should be showed, disabled or hidden.
    Code:
    Ext.widget('button', {text:'Reativar', plugins : [new Permission({cd_controle : '0002'})] });
    ...
    Ext.define('GPermission', {
        init : function(parent) { // parent is the field
            parent.on('render', function(field) {
                var form = field.up('form');
                if (form.isReadOnly === true) {// your defined variable
                    ...//put the field as read only
                }
            });
        }
    });

  4. #4
    Sencha User rmiclon's Avatar
    Join Date
    Aug 2011
    Posts
    11
    Vote Rating
    0
    rmiclon is on a distinguished road

      0  

    Talking


    Hello lucasguaru,
    Thank you for your reply. I can't believe this needs a specially made plugin. It comes as a option in the DojoToolkit. I would have thought Sencha would have definitely brought that in.

    As for your plugin, Which variable are you defining here? I haven't created anything myself so this is a bit confusing to me. I have become familiar with the 'out of the box' framework but thats about all I have been able to try. Can you explain this a tad bit more? Just act like I am a 6 year old

    if (form.isReadOnly === true) {// your defined variable ...//put the field as read only }

    Thank you
    Renee

  5. #5
    Sencha User lucasguaru's Avatar
    Join Date
    May 2011
    Location
    Guaruj√°, Brazil
    Posts
    77
    Answers
    9
    Vote Rating
    2
    lucasguaru is on a distinguished road

      0  

    Default


    I'm guessing you create your form and window inside the buttons edit and view.
    The plugin:
    Code:
    Ext.define('ReadOnly', {
        alias : 'plugin.readonly',
        init : function(parent) { // parent is the field
            parent.on('render', function(field) {
                var form = field.up('form');
                if (form.isReadOnly === true) {// your defined variable
                    field.setDisabled(true);
                }
            });
        }
    });
    Editing:
    Code:
    Ext.create('Ext.window.Window',{
        items : {
            xtype : 'form',
            isReadOnly : false, //You set your readOnly here. You can name this as you wish. The plugin will look for this.
            items : [{
                xtype : 'textfield',
                name : 'name',
                plugins : ['readonly'],
                ...
            }]
            ...
        }
    });
    Viewing:
    Code:
    Ext.create('Ext.window.Window',{
        items : {
            xtype : 'form',
            isReadOnly : true, //You set your readOnly here. You can name this as you wish. The plugin will look for this.
            items : [{
                xtype : 'textfield',
                name : 'name',
                plugins : ['readonly'],
                ...
            }]
            ...
        }
    });
    Good look!

  6. #6
    Sencha User rmiclon's Avatar
    Join Date
    Aug 2011
    Posts
    11
    Vote Rating
    0
    rmiclon is on a distinguished road

      0  

    Cool Give it a try

    Give it a try


    lucasguaru,
    Thank you so much for your assistance. I will give this a try in a little bit. i just got swamped with stuff. I will let you know as soon as I give it a try!

    Renee