Populated Form that can toggle between editable and readonly

[rmiclon]

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!

[rmiclon]

Anyone?

[lucasguaru]

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.

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
            }
        });
    }
});

[rmiclon]

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

[lucasguaru]

I'm guessing you create your form and window inside the buttons edit and view.
The plugin:

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:

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:

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!

[rmiclon]

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