Architect 2 - How to populate a form from a combo box selection?

[IanBratley]

With a basic knowledge of EXT JS I decided to give Architect 2 a try.

I created a simple form with customer information that used the CRUD/php method of saving out the records to a MySQL database, but now I am stuck on how to best re-populate the form for record editing using Architect 2.


I can populate the customer list into a combo box from the database with customer name & id, but I am unsure on how to trigger my selection from the combo box and populate the form on the same page using the selected customer id so that I can edit the record.


This is my first post, so any help would be most appreciated and apologies if this question has already been answered before but I couldn't find it on here.

[drgaryholland]

But here is one way (I'm using restful web service). Instead of customer id I am using customer order number:
Get the customer id via "var custOrderNo = combo.value"

You can read that value based on an event on the combo list change event where combo.value is the value that was selected and passed in to the change event function.

Get the form that will be loaded:
var form = Ext.getCmp('custOrderHeaderForm');

My proxy appends the primary key or id to the proxy url /myhost/myapp/custHeader?ORDER-001
where ORDER-001 is the selection made from the drop down combo box list .

Load the model (put a proxy on the model instead of the store).

Myapp.model.CustOrderHeader.load(custOrder, {
scope: this,
callback: function(custOrderHeader, operation){ //custOrderHeader is the record being read
form.loadRecord(custOrderHeader); // This will populate all fileds on the form that match the fields defined in your model but they must match by name.


Hope this helps

[ian.bratley]

Hi
Thank you for your help with this.
So far I have the following which I can see is returning all of the records from the player table and in the headers I can see my requested record ID
Screen Shot 2013-02-02 at 15.55.43.png

But when I console log out the player, its returning the first record held in the table and not the record with the id = 21
And no matter what I do, I cannot populate the form with the results?
Again, any help on this would be most appreciated.

Ext.define('MyApp.controller.Player', {
    extend: 'Ext.app.Controller',

    models: [
        'Player'
    ],
    stores: [
        'Player'
    ],
    views: [
        'PDLViewport'
    ],

    refs: [
        {
            ref: 'editplayerForm',
            selector: 'UserCentreCt > #MasterAdminCardCt > #EditPlayerCt > #EditPlayerForm'
        }
    ],
    
    picksPlayer: function(combo, records, options) {
        var id = combo.value;
        var form = this.getEditplayerForm();

        MyApp.model.Player.load(id, {
            scope: this,
            callback: function(player, operation){
                form.loadRecord(player);
                console.log(player);
            }
        });
    }

});

The Model

Ext.define('MyApp.model.Player', {
    extend: 'Ext.data.Model',

    idProperty: 'PlayerId',

    fields: [
        {
            name: 'PlayerId',
            mapping: 'player_id',
            type: 'int'
        },
        {
            name: 'VenueId',
            mapping: 'player_venue_id',
            type: 'int'
        },
        {
            name: 'Salutation',
            mapping: 'player_contact_salutation'
        },
        {
            name: 'Forename',
            mapping: 'player_contact_forename'
        },
        {
            name: 'Surname',
            mapping: 'player_contact_surname'
        }
    ],

    proxy: {
        type: 'ajax',
        api: {
            create: 'data/createsPlayer.php',
            read: 'data/listsPlayer.php',
            update: 'data/updatesPlayer.php',
            destroy: 'data/deletesPlayer.php'
        },
        reader: {
            type: 'json',
            root: 'data'
        },
        writer: {
            type: 'json',
            root: 'data'
        }
    }
});

[drgaryholland]

You are passing a parametr named "id" who's value = 21.

Is your api able to do something with this id value?
Without seeing your api code it's hard to tell.

You can also try setting appendid = false on your proxy and pass the id in the url like:
localhost/~ian/somePathToYourApi/21


Hope this helps.