1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    16
    Vote Rating
    0
    prem1er is on a distinguished road

      0  

    Default New to Ext, Expanding Form Question

    New to Ext, Expanding Form Question


    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

  2. #2
    Sencha User PhiLho's Avatar
    Join Date
    Nov 2011
    Location
    Near Paris, France
    Posts
    139
    Vote Rating
    1
    PhiLho is on a distinguished road

      0  

    Default


    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).

  3. #3
    Sencha User
    Join Date
    Mar 2012
    Posts
    16
    Vote Rating
    0
    prem1er is on a distinguished road

      0  

    Default


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

    Code:
    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?

  4. #4
    Sencha User PhiLho's Avatar
    Join Date
    Nov 2011
    Location
    Near Paris, France
    Posts
    139
    Vote Rating
    1
    PhiLho is on a distinguished road

      0  

    Default


    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...).

Thread Participants: 1