Results 1 to 3 of 3

Thread: dynamically added form fields in columns

  1. #1

    Default dynamically added form fields in columns

    I have a form consisting of separate columns of information; each column represents a step in a process, with the first column detailing the labels for each field row, i.e.

    Code:
    Process Step [Step 1 Name] [Step # Name]
    Completed Date [Step 1 Date Field] [Step # Date Field]
    Actual Minutes [Step 1 Number Ticker] [Step # Number Ticker]
    Notes [Step 1 Text Field] [Step # Text Field]
    Last Mod TS [Step 1 Text Field] [Step # Text Field]
    Last Mod User [Step 1 Text Field] [Step # Text Field]
    I have a vague notion about adding separate columns per step, with a static column for the labels followed by a column for each step, which would be generated by looping through a datastore with each step as a separate record. My attempts to do this and understand the outcome have baffled and defeated me, however;

    Code:
    var processesColumns = Ext.widget({
           xtype: 'panel',
           layout:'hbox'
    });
    
    function addColumns(store)
    {
        var labelColumn = Ext.widget({
            xtype: 'fieldContainer',
            layout:'vbox',
            items: [
                {
                    xtype: 'textfield',
                    hidden: true,
                    name: 'Item_ID'
                }, {
                    xtype: 'label',
                    text: 'Process Step'
                }, {
                    xtype: 'label',
                    text: 'Completed Date'
                }, {
                    xtype: 'label',
                    text: 'Actual Minutes'
                }, {
                    xtype: 'label',
                    text: 'Notes'
                }, {
                    xtype: 'label',
                    text: 'Last Mod TS',
                    style: 'line-height: 32px'
                }, {
                    xtype: 'label',
                    text: 'Last Mod User'
                }
            ]
        });
        processesColumns.add(labelColumn);
            store.each(function(record){
            var column = Ext.widget({
                xtype: 'fieldContainer',
                layout:'vbox',
                items: [
                    {
                        xtype: 'label',
                        text: record.Display_Name
                    }, {
                        xtype: 'datefield',
                        name: record.Process_Short_Name + '_Completed_Date',
                        format: 'd M Y',
                        startDay: 1,
                        allowBlank: true,
                        editable: false,
                        listeners: {
                            specialkey: function(field, e) {
                                if (e.getKey() == e.DELETE) {
                                     field.setValue('');
                                     enableDisableRemoveButton;
                                }
                            },
                            focus: function(field, the, e) {
                                addKeyMap(field, the, e);
                            },
                            change: enableDisableRemoveButton
                        }
                    }, {
                        xtype: 'numberfield',
                        name: record.Process_Short_Name + '_Actual_Minutes',
                        allowBlank: true
                    }, {
                        xtype: 'textfield',
                        name: record.Process_Short_Name + '_Notes',
                        allowBlank: true
                    }, {
                        xtype: 'displayfield',
                        name: record.Process_Short_Name + '_Last_Mod_TS',
                        allowBlank: true,
                        editable: false,
                        renderer: function(value) {
                            return Ext.Date.format(Ext.Date.parse(value, 'Y-m-d H:i:s'), 'd M Y H:i:s');
                        }
                    }, {
                        xtype: 'displayfield',
                        name: record.Process_Short_Name + '_Last_Mod_User_ID',
                        allowBlank: true,
                        editable: false
                    }
                ]
            });
            processesColumns.add(column);
        });
    }
    The processesColumns panel is then to be put into a form.panel's items listing to display the fields, but attempts to see the columns have so far not worked.

    Is this the best way to create this? What are the alternatives? If this is the best way, how am I going wrong?

  2. #2
    Sencha User slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,165
    Answers
    505

    Default

    Instead of adding columns I'd probably add rows myself. The parent container / panel would have a layout of 'anchor' and the items added would be fieldcontainers where the fieldLabel would ultimately be your label column. The fieldcontainer would have an hbox layout and two items in it (comprising your next two columns) each with flex: 1.

    Feel free to make a test case at https://fiddle.sencha.com and share that here if you continue to have trouble. That might help the community troubleshoot along with you as they can fork the fiddle and modify it to share code edits back.

  3. #3

    Default

    Hi,

    Can you please make this example work in Fiddle ? https://fiddle.sencha.com/#view/editor&fiddle/2c34

    Thanks!

Tags for this Thread

Posting Permissions

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