1. #1
    Sencha User
    Join Date
    Oct 2012
    Posts
    1
    Vote Rating
    0
    IanBratley is on a distinguished road

      0  

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

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


    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.

  2. #2
    Sencha User
    Join Date
    Oct 2012
    Location
    Dublin, California
    Posts
    12
    Vote Rating
    0
    drgaryholland is on a distinguished road

      0  

    Default Depends on how your web service is configured

    Depends on how your web service is configured


    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

  3. #3
    Sencha User
    Join Date
    Dec 2012
    Posts
    1
    Vote Rating
    0
    ian.bratley is on a distinguished road

      0  

    Default


    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.

    Code:
    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
    Code:
    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'
            }
        }
    });

  4. #4
    Sencha User
    Join Date
    Oct 2012
    Location
    Dublin, California
    Posts
    12
    Vote Rating
    0
    drgaryholland is on a distinguished road

      0  

    Default The problem is most likely in your API for a read

    The problem is most likely in your API for a read


    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.