1. #1
    Ext JS Premium Member
    Join Date
    Apr 2011
    Posts
    13
    Vote Rating
    0
    dve is on a distinguished road

      0  

    Question Dynamically creating and populating a form, from a datastore record

    Dynamically creating and populating a form, from a datastore record


    I am trying to dynamically populate a ExtJs FormPanel from a datastore record.
    When the user clicks on a row in the GridPanel, the buildForm method is called and the clicked record is sent passed in as the first arg.

    The below code (when debugging) appears to be working, but the doLayout method has no effect.

    Can anyone point me in the right direction?

    Code:
       mymodule = Ext.extend(Ext.FormPanel, {
            forceLayout: true,
        initComponent: function () {
            Ext.applyIf(this, {
                id: Ext.id(),
                labelWidth: 75,
                defaultType: 'textfield',
                defaults: {
                    style: 'padding-left:3px'
                },
                items: [{
                    layout: 'form',
                    border: false,
                    style: 'padding:5px',
                    defaults: {
                        style: 'padding-left:3px'
                    },
                    items: [{
                        fieldLabel: 'test',
                        xtype: 'textfield'
                    }, {
                        fieldLabel: 'test',
                        xtype: 'textfield'
                    }]
                }]
            });
            mymodule.superclass.initComponent.call(this);
        },
        buildForm: function (record, c) {
            var form = this.getForm();
    
            var formItems = new Ext.util.MixedCollection();
    
            Ext.each(record.fields.items, function (item) {
                formItems.add(new Ext.form.TextField({
                    labelStyle: 'width:100px',
                    fieldLabel: item.name,
                    name: item.dataIndex,
                    id: 'field-' + item.name
                }));
            }, this);
    
            form.items = formItems;
    
            this.doLayout(false, true);
    
            form.loadRecord(record);
        }
        });

  2. #2
    Sencha User Tim Toady's Avatar
    Join Date
    Feb 2010
    Location
    Pennsylvania
    Posts
    537
    Vote Rating
    71
    Tim Toady is a jewel in the rough Tim Toady is a jewel in the rough Tim Toady is a jewel in the rough Tim Toady is a jewel in the rough

      0  

    Default


    I would use the add and removeAll functions that Ext provides for containers rather than trying to overwrite the items array. Just do a this.removeAll() above your add loop and in your add loop do this.add instead of formItems.add

Similar Threads

  1. Creating TextFields Dynamically in the Form from the Store Values
    By sriharshaparigi in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 15 Apr 2009, 6:12 AM
  2. Combo box not populating one record properly
    By tBSTAR in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 21 Oct 2008, 12:57 PM
  3. Populating FormPanel from DataStore
    By RayGarrison in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 28 May 2008, 11:33 AM
  4. Creating JSON object and populating tree
    By anniejose in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 5 Apr 2008, 4:41 AM
  5. Dynamically creating a form with correct field list
    By LeibNiZ in forum Ext 2.x: Help & Discussion
    Replies: 5
    Last Post: 3 Nov 2007, 9:46 AM

Thread Participants: 1

Tags for this Thread