New to Ext, Expanding Form Question

[prem1er]

I'm trying to create a form for users that looks something like this...

Name: [text field]
Age: [text field]
Company Year Salary
[text field] [text field] [text field]

The 3 inputs for company, year and salary need to be able to add rows below so users can enter multiple values for these inputs. Each time a button is clicked, a new row should appear below with 3 new inputs for company, year and salary. In javascript I would have used a table and added a row for each time a user clicked a button. I'm looking for the same sort of functionality with Ext, but I'm not finding very good information. I have tried to do this using a Panel and just appending to the end of it without much luck. Is there a way to do this with a grid? Or are there any other suggestions that might point me in the right direction? TIA

[PhiLho]

Using a grid can be an elegant way to do this, you just need to add a new record when your Add button is clicked, then the user can edit the fields of the added row (and the previous ones).

[prem1er]

Thanks for the reply. I'm looking into a grid now. Here is the code I have so far.

Ext.ns('InvDocsUpload.grid');

InvDocsUpload.grid.newGrid = Ext.extend(Ext.grid.GridPanel, {
    initComponent: function() {
        var config = {
            title: 'Test Grid',
            columns:[{
                header: 'Document Description',
                field: 'textfield',
                sortable: false,
                hideable: false,
                width: 300
            },{
                header: 'Required',
                sortable: false,
                hideable: false,
                width: 100
            },{
                header: 'Generic',
                sortable: false,
                hideable: false,
                width: 100
            },{
                header: 'Delete',
                sortable: false,
                hideable: false,
                width: 100
            }],
            selType: 'cellmodel',
        };
        Ext.apply(this, Ext.apply(this.initialConfig, config));
        InvDocsUpload.grid.newGrid.superclass.initComponent.apply(this, arguments);
    }    
});

Ext.reg('newGrid', InvDocsUpload.grid.newGrid);

The issue is that the example I am following is using ext 4 and I'm using 3. Is there a way to achieve an editable grid in ext 3?

[PhiLho]

Your terminology is confusing (there are several "Ext" products) and you show JavaScript code, so I suppose you are in the wrong forum.
You are in the Ext GWT 3 forum, which is about a Java library to make Web applications...
You can get better (more precise) answers in the right forum (although my advice above still applies, I think...).