CODEWITHSUNDEEP
javascriptextjscastle-monorail
anitacynax
anitacynax

Reputation: 255

Loading an Edit User form with data from database

I have a grid which displays a list of members. The grid has an actioncolumn called Edit with an icon. If a user clicks on the Edit icon, the window is redirected to another page which contains the Edit User form.

Now the code for my store and grid is as follows:

    var userstore = Ext.create('Ext.data.Store', {
      storeId: 'viewUsersStore',
      model: 'Configs',
      autoLoad: true,
      proxy: {
        type: 'ajax',
        url: '/user/getuserviewdata.castle',
        reader: { type: 'json', root: 'users' },
        listeners: {
        exception: function (proxy, response, operation, eOpts) {
            Ext.MessageBox.alert("Error", "Session has timed-out. Please re-login and 
             try again.");
      }
    }
  }
});

var grid = Ext.create('Ext.grid.Panel', {
    id: 'viewUsersGrid',
    title: 'List of all users',
    store: Ext.data.StoreManager.lookup('viewUsersStore'),
    columns: [
        //{header: 'ID', dataIndex: 'id', hidden: true},
        {header: 'Username', dataIndex: 'username'},
        {header: 'Full Name', dataIndex: 'fullName'},
        {header: 'Company', dataIndex: 'companyName'},
        {header: 'Latest Time Login', dataIndex: 'lastLogin'},
        {header: 'Current Status', dataIndex: 'status'},
        {header: 'Edit', 
         menuDisabled: true, 
         sortable: false, 
         xtype: 'actioncolumn', 
         width: 50, 
         items: [{ 
            icon: '../../../Content/ext/img/icons/fam/user_edit.png', 
            handler: function (grid, rowIndex, colIndex){
                var rec = userstore.getAt(rowIndex); 
                alert("Edit " + rec.get('username')+ "?");  
                EditUser(rec.get('id')); 
                } 
             }] 
        }
    ]

});

function EditUser(id) {

    window.location = "/user/index.castle";

}

When a user clicks the Edit icon, function EditUser(id) gets called. In that function, window.location redirects the user to the Edit User form (that's what the url stands for).

Now my problem is: how to load member data from the database into the Edit User form?

In other words, if the user clicks on the Edit icon, he/she should be redirected to the Edit User form/window which should then be (automatically) loaded with member data (i.e. Username, Fullname, etc.) from the database (each member has a unique id).

I am not using php but Ext JS and Castle Monorail (MVC). I tried using loadRecord(rec) and that works but the problem is that the grid record does not contain all the data fields that occur in the Edit User form and so the data needs to be loaded from the database and not the record.

For example, the Edit User form has a checkboxgroup called Permissions which is left out in the grid.

Also, the edited member data needs to be saved back to the database.

Anyone have any tips as to how to go about this?

Upvotes: 1

Views: 547

Answers (1)

Neil McGuigan
Neil McGuigan

Reputation: 48256

  1. why are you making a multi-page app with extjs? and not a single page app? what are the advantages?

  2. You need the id of the user. That is passed from the grid. Then you load that user from the database into a model, using Model.load(). You can use form.loadRecord() to load a model into a form, and it will automatically populate, based on the name of form fields.

To load a model, and the load it into a form you can do this:

Model.load(1, {
  callback: function(record){
    form.loadRecord(record); //any matching form names will get loaded into form
  }
});

Three. you should use your oddly named "configs" model for the form. You should move the proxy from the store to the model. The store will inherit its models proxy.

To move the proxy from the store to the model, simply remove it in the code, and add the "proxy" property to the model. They are the same whether on a store or model.

Upvotes: 1

Related Questions