Results 1 to 8 of 8

Thread: Using the same form for View and Edit

  1. #1
    Sencha Premium User
    Join Date
    Apr 2011
    Posts
    108
    Answers
    1

    Default Using the same form for View and Edit

    In our app they would like the forms to be view/read only and specifically hit "Edit" in order to modify the data. I could not find as much as I would have thought on this subject. I would rather not have two versions of the same form and they would not like a popup window for add/editing data. I started down the path of marking all the fields as readOnly: true which is fine but then trying to figure the best way to switch the attribute to readOnly: false. I created a viewModel with a data attribute 'readOnly': true, when I set it to false in the controller the fields don't become editable as I had hoped they would.

    Here is a fiddle to show what I am doing: https://fiddle.sencha.com/#view/editor&fiddle/294g

    Any suggestions welcome.

    Thank you
    Rudy

  2. #2
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,253
    Answers
    759

    Default

    You have a readOnly property in the viewmodel but it's only ever used on the buttons, not the fields.
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  3. #3
    Sencha Premium User
    Join Date
    Apr 2011
    Posts
    108
    Answers
    1

    Default

    It's in the fieldDefaults:

    fieldDefaults: {
    labelAlign: 'right',
    msgTarget: 'side',
    readOnly: '{readOnly}'
    },

    I had it in each field also and it did not matter.

  4. #4
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,253
    Answers
    759

    Default

    Right but you're not setting it as a bind:

    https://fiddle.sencha.com/#view/editor&fiddle/294m

    It won't work in fieldDefaults because it doesn't call the appropriate setter.
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  5. #5
    Sencha Premium User
    Join Date
    Apr 2011
    Posts
    108
    Answers
    1

    Default

    Ahh. I updated my fiddle. https://fiddle.sencha.com/#view/editor&fiddle/294g Too bad that won't work in the fieldDefaults. Does this seem like a good approach?

  6. #6
    Sencha Premium Member
    Join Date
    Jun 2015
    Location
    Melbourne, Australia
    Posts
    56
    Answers
    6

    Default

    You were almost there, I got it to work with the following. See inline comments:

    PHP Code:
    Ext.define('Fiddle.view.MainForm', {
        
    extend'Ext.form.Panel',
        
    xtype'mainform',

        
    requires: [
            
    'Fiddle.model.UserModel',
            
    'Fiddle.view.MainController'
        
    ],

        
    viewModel: {
            
    data: {
                
    readOnlytrue
            
    }
        },

        
    controller'maincontroller',
        
    borderfalse,
        
    layout'vbox',
        
    bodyPadding10,

        
    fieldDefaults: {
            
    labelAlign'right',
            
    msgTarget'side'
        
    },

        
    defaults: { // I think fieldDefaults is for the fieldLabels, so added defaults
            
    bind: { // Added the bind config to wrap the bound configs
                
    readOnly'{readOnly}'
            
    }
        },

        
    items: [{
            
    xtype'textfield',
            
    name'firstname',
            
    fieldLabel'First'
        
    }, {
            
    xtype'textfield',
            
    name'lastname',
            
    fieldLabel'Last'
        
    }, {
            
    xtype'textfield',
            
    name'userid',
            
    fieldLabel'User ID'
        
    }
            
    // ,{} This empty object was causing issues witht the defaults:
        
    ],

        
    dockedItems: [{
            
    xtype'toolbar',
            
    dock'top',
            
    items: [{
                
    text'Add',
                
    tooltip'Create a new User',
                
    listeners: {
                    
    click'addClicked'
                
    }
            }, {
                
    text'Edit',
                
    tooltip'Edit the User',
                
    listeners: {
                    
    click'editClicked'
                
    }
            }]
        }, {
            
    xtype'toolbar',
            
    dock'bottom',
            
    items: [{
                
    text'Save',
                
    bind: { // Added the bind config to wrap the bound configs 
                    
    disabled'{readOnly}'

                
    },
                
    listeners: {
                    
    click'saveClicked'
                
    }
            }, {
                
    text'Cancel',
                
    bind: { // Added the bind config to wrap the bound configs
                    
    disabled'{readOnly}'

                
    },
                
    listeners: {
                    
    click'cancelClicked'
                
    }
            }]
        }]

    }); 

  7. #7
    Sencha Premium User
    Join Date
    Apr 2011
    Posts
    108
    Answers
    1

    Default

    I tried using "defaults" but the form in my app has a fieldcontainer and it through an error since fieldcontainer does not have a readOnly property.

  8. #8
    Ext JS Premium Member
    Join Date
    May 2008
    Location
    Austria, Vienna
    Posts
    264

    Default

    I've defined the Form as a Mixin which is used by both the Add and the Edit form classes.

Similar Threads

  1. [OPEN] Unable to edit code in a view
    By CaCtus491 in forum Sencha Architect 3.x: Bugs
    Replies: 3
    Last Post: 4 Nov 2014, 1:25 PM
  2. 1.2.0 Beta1 - view edit template problem
    By ryland in forum Ext Designer: Bugs
    Replies: 7
    Last Post: 9 Aug 2011, 12:08 PM
  3. View/Edit Mode Switch on a Form?
    By jezmck in forum Ext 2.x: Help & Discussion
    Replies: 5
    Last Post: 21 May 2008, 11:50 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •