how to add textfield value to the gridpanel on button click event in extjs

Question

I want to know how to add the textfields value to the grid on button click event in extjs. I can see form and all the controls with validations, but when I click on button I am not able to add this data to the grid panel my code is as below

app.js

Ext.application({
    name: 'app',
    launch: function () {
    Ext.define('User', {
    extend: 'Ext.data.Model',
    fields: [

        {name: 'name',  type: 'string'},
        {name: 'dob', type: 'date'},
        {name: 'email', type: 'string'},
        {name: 'mobile', type: 'string'},

    ]
});


var data = {
    users: [
        {

            name: 'abc',
            dob: '4/12/2012',
            email: '[email protected]',
            mobile:'9800000774'
        },
        {

            name: 'xyz',
            dob: '4/13/2012',
            email: '[email protected]',
            mobile:'9821111774'
        }
    ]
};

//note how we set the 'root' in the reader to match the data structure above
var store = Ext.create('Ext.data.Store', {
    autoLoad: true,
    storeId:'dataStore',
    model: 'User',
    data : data,
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            root: 'users'
        }
    }
 });
Ext.define('MyApp.view.ui.MyWindow', {
    extend: 'Ext.window.Window',

    height: 505,
    width: 462,
    title: 'My Window',

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'form',
                    height: 270,
                    padding: 5,
                    bodyPadding: 10,

                    title: 'My Form',
                    items: [
                        {
                            xtype: 'textfield',
                            id: 'txtnm',
                            fieldLabel: 'Name',
                            allowBlank: false,
                            anchor: '100%'
                        },
                        {
                            xtype: 'textareafield',
                            id: 'txtadd',
                            fieldLabel: 'Address',
                            allowBlank: false,
                            anchor: '100%'
                        },
                        {
                            xtype: 'datefield',
                            id: 'dtDob',
                            fieldLabel: 'DOB',
                            allowBlank: false,
                            anchor: '100%'
                        },
                        {
                            xtype: 'textfield',
                            id: 'txtemail',
                            fieldLabel: 'Email',
                            allowBlank: false,
                            vtype: 'email',
                            anchor: '100%'
                        },
                        {
                            xtype: 'textfield',
                            id: 'txtmob',
                            fieldLabel: 'Mobile no',
                            allowBlank: false,
                            maskRe: /[0-9]/,
                            maxLength: 10,
                            minLength: 10,
                            anchor: '100%'
                        },
                        {
                            xtype: 'textfield',
                            id: 'txtpwd',
                            inputType: 'password',
                            fieldLabel: 'Password',
                            allowBlank: false,
                            anchor: '100%'
                        }
                    ]
                },
                {
                    xtype: 'button',
                    id: 'btnSubmit',
                    margin: '0 0 5 200',
                    text: 'Submit',
                    listeners: 
                    {
                        click : function()
                        {
                            alert("hi");
                            //What to write here to add data of a controls in grid
                        }
                    }

                },

                {
                    xtype: 'gridpanel',
                    height: 174,
                    padding: 5,
                    width: 450,
                    title: 'My Grid Panel',
                    store: Ext.data.StoreManager.lookup('dataStore'),
                    columns: [
                        {
                            xtype: 'gridcolumn',
                            dataIndex: 'name',
                            text: 'Name'
                        },
                        {
                            xtype: 'datecolumn',
                            dataIndex: 'dob',
                            text: 'DOB'
                        },
                        {
                            xtype: 'gridcolumn',
                            dataIndex: 'email',
                            text: 'Email'
                        },
                        {
                            xtype: 'gridcolumn',
                            dataIndex: 'mobile',
                            text: 'Contact no'
                        },

                    ],
                    viewConfig: {

                    }
                }
            ]
        });

        me.callParent(arguments);
    }
});


//        Ext.define('MyApp.MyWindow', {
//            extend: 'Ext.Window',
//            title: 'Welcome!',
//            initComponent: function () {
//                this.items = [{
//                    xtype: 'textfield',
//                    name: 'tfName',
//                    fieldLabel: 'Enter your name'
//                }], this.callParent(arguments);
//            }
//        });
       var win = Ext.create('MyApp.view.ui.MyWindow');
        win.show();
    }
});

Default.aspx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
     <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">

    <script type="text/javascript" src="extjs/ext-debug.js"></script>
    <script type="text/javascript" src="app.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div>

    </div>
    </form>
</body>
</html>

sha sha · Accepted Answer · 2012-06-10T17:14:38

Grid has a store attached to it. This part you got right.

Store has an array of records. This part you also got right (I hope at least).

When you want to add record to the grid - you need to add record to the store. Look at the method add() http://docs.sencha.com/ext-js/4-0/#!/api/Ext.data.Store-method-add

Your form is not attached to the model yet, so you will probably have to create a model first, populate its fields with values from the form and then add it to the store. Look either for updateRecord() method - http://docs.sencha.com/ext-js/4-0/#!/api/Ext.form.Basic-method-updateRecord - but then you would need to change your form definition to map it to the model or for individual getValue() calls for each field.

After you try something like this - post updated code if you still have questions.

One last note - I assumed you're using ExtJs4.x is that correct?

how to add textfield value to the gridpanel on button click event in extjs

1 Answers