Bind Ext form data into GridPanel in ExtJS

Question

I had created a demo page using ExtJS for the first time.

I have created the .JS file as below.

Ext.require([
//'Ext.form.*',
//'Ext.layout.container.Column',
//'Ext.tab.Panel'

    '*'
]);

Ext.onReady(function() {
    Ext.QuickTips.init();

    var bd = Ext.getBody();
    var required = '<span style="color:red;font-weight:bold" data-qtip="Required">*</span>';
    var simple = Ext.widget({
        xtype: 'form',
        layout: 'form',
        collapsible: true,
        id: 'userForm',
        frame: true,
        title: 'User Details',
        bodyPadding: '5 5 0',
        align: 'center',
        width: 350,
        buttonAlign: 'center',
        fieldDefaults: {
            msgTarget: 'side',
            labelWidth: 75
        },
        defaultType: 'textfield',
        items: [{
            id: 'txtName',
            fieldLabel: 'Name',
            name: 'name',
            afterLabelTextTpl: required,
            allowBlank: false
        }, {
            id: 'dDOJ',
            fieldLabel: 'Date Of Joining',
            name: 'doj',
            xtype: 'datefield',
            format: 'd/m/Y',
            afterLabelTextTpl: required,
            allowBlank: false
        }, {
            id: 'txtAge',
            fieldLabel: 'Age',
            name: 'age',
            xtype: 'numberfield',
            minValue: 0,
            maxValue: 100,
            afterLabelTextTpl: required,
            allowBlank: false
        }, {
            id: 'chkActive',
            xtype: 'checkbox',
            boxLabel: 'Active',
            name: 'cb'
}],

            buttons: [{
                text: 'ADD',
                listeners: {
                    click: {

                        fn: function() {
                            debugger;
                            if (Ext.getCmp('txtName').getValue() == "" || Ext.getCmp('dDOJ').getValue() == "" || Ext.getCmp('txtAge').getValue() == "") {
                                alert("Please Enter All Required Details!");
                                return false;
                            }
                            var reply = confirm("Are You Sure You Want To Save?")
                            if (reply != false) {
                                fnShowGrid();
                            }
                        }
                    }
                }
}]
            });
            simple.render(document.body);
        });
        function fnShowGrid() {
            debugger;
            var vName = Ext.getCmp('txtName').getValue();
            var vDOJ = Ext.Date.format(Ext.getCmp('dDOJ').getValue(), 'd/m/Y');
            var vAge = Ext.getCmp('txtAge').getValue();
            var vIsActive = "InActive";
            if (Ext.getCmp('chkActive').getValue() == true) {
                vIsActive = "Active";
            }
            var store = Ext.create('Ext.data.ArrayStore', {
                storeId: 'myStore',
                idIndex: 0,
                fields: [
                           { name: 'name' },
                           { name: 'doj' },
                           { name: 'age' },
                           { name: 'active' }
                        ],
                //data: { name: vName, doj: vDOJ, age: vAge, active: vIsActive}
                data: [[vName, vDOJ, vAge, vIsActive]]
            });

            store.load({
                params: {
                    start: 1,
                    limit: 3
                }
            });

            Ext.create('Ext.grid.Panel', {
                title: 'User Details',
                store: store,
                columns: [
            {
                header: 'Name',
                width: 160,
                sortable: true,
                dataIndex: 'name'
            },
            {
                header: 'Date Of Join',
                width: 75,
                sortable: true,
                dataIndex: 'doj'
            },
            {
                header: 'Age',
                width: 75,
                sortable: true,
                dataIndex: 'age'
            },
            {
                header: 'Active',
                width: 75,
                sortable: true,
                dataIndex: 'active'
}],

                height: 200,
                width: 400,
                renderTo: Ext.getBody()
            });
            //detailsGrid.render(document.body);
        }

The gridPanel is being displayed. But each time add a new data its creating a new grid!

I want to display GridPanel only once including all before added data.

Here's fiddle: http://jsfiddle.net/pratikhsoni/wc9mD/1/

Answer 1

First of All.

Its very good to see you getting touch with EXT js. Mistake's i will like to highlight in your code.

1.   if (reply != false) {
            fnShowGrid();
      }

In this you are calling your grid to be created which is being called why you are creating a new grid . you just have to update the store.

Approach : You must call it only once check if it exist and if yes then update the store like this.

if (reply != false) {
                if(!Ext.getCmp('hello')) {
                fnShowGrid();
                } else {
                  var store=Ext.getCmp('hello').getStore();  

                   store.add ({
                              name: 'sadad',
                              doj:'25/01/2015',
                              age:'26',
                              active:'false'
                              });
                              store.reload();
                             }

                     }

So in all you have to update the store add the new records. I have hardcoded right now you can get the values as you have got when creating it.

Please find Updated fiddle.

Fiddle

Answer 2

Here is the working example based on your fiddle!

Ext.require([
'*'
]);

        store = Ext.create('Ext.data.ArrayStore', {
            storeId: 'myStore',
            idIndex: 0,
            fields: [
                       { name: 'name' },
                       { name: 'doj' },
                       { name: 'age' },
                       { name: 'active' }
                    ],
            //data: { name: vName, doj: vDOJ, age: vAge, active: vIsActive}
        });

Ext.onReady(function() {
Ext.QuickTips.init();

var bd = Ext.getBody();
var required = '<span style="color:red;font-weight:bold" data-qtip="Required">*</span>';
var simple = Ext.widget({
    xtype: 'form',
    layout: 'form',
    collapsible: true,
    id: 'userForm',
    frame: true,
    title: 'User Details',
    bodyPadding: '5 5 0',
    align: 'center',
    width: 350,
    buttonAlign: 'center',
    fieldDefaults: {
        msgTarget: 'side',
        labelWidth: 75
    },
    defaultType: 'textfield',
    items: [{
        id: 'txtName',
        fieldLabel: 'Name',
        name: 'name',
        afterLabelTextTpl: required,
        allowBlank: false
    }, {
        id: 'dDOJ',
        fieldLabel: 'Date Of Joining',
        name: 'doj',
        xtype: 'datefield',
        format: 'd/m/Y',
        afterLabelTextTpl: required,
        allowBlank: false
    }, {
        id: 'txtAge',
        fieldLabel: 'Age',
        name: 'age',
        xtype: 'numberfield',
        minValue: 0,
        maxValue: 100,
        afterLabelTextTpl: required,
        allowBlank: false
    }, {
        id: 'chkActive',
        xtype: 'checkbox',
        boxLabel: 'Active',
        name: 'cb'
}],

        buttons: [{
            text: 'ADD',
            listeners: {
                click: {

                    fn: function() {
                        debugger;
                        if (Ext.getCmp('txtName').getValue() == "" || Ext.getCmp('dDOJ').getValue() == "" || Ext.getCmp('txtAge').getValue() == "") {
                            alert("Please Enter All Required Details!");
                            return false;
                        }
                        var reply = confirm("Are You Sure You Want To Save?")
                        if (reply != false) {
                            fnShowGrid();
                        }
                    }
                }
            }
}]
        });
        simple.render(document.body);
    });
    function fnShowGrid() {
        debugger;
        var vName = Ext.getCmp('txtName').getValue();
        var vDOJ = Ext.Date.format(Ext.getCmp('dDOJ').getValue(), 'd/m/Y');
        var vAge = Ext.getCmp('txtAge').getValue();
        var vIsActive = "InActive";
        if (Ext.getCmp('chkActive').getValue() == true) {
            vIsActive = "Active";
        }

        if (!Ext.getCmp('sample-grid')) {
            store.add({
                name: vName,
                doj: vDOJ,
                age: vAge,
                active: vIsActive
            });
            Ext.create('Ext.grid.Panel', {
                title: 'User Details',
                store: store,
                id: 'sample-grid',
                columns: [
                    {
                        header: 'Name',
                        width: 160,
                        sortable: true,
                        dataIndex: 'name'
                    },
                    {
                        header: 'Date Of Join',
                        width: 75,
                        sortable: true,
                        dataIndex: 'doj'                            
                    },
                    {
                        header: 'Age',
                        width: 75,
                        sortable: true,
                        dataIndex: 'age'                            
                    },
                    {
                        header: 'Active',
                        width: 75,
                        sortable: true,
                        dataIndex: 'active'                            
                    }
                ],
                height: 200,
                width: 400,
                renderTo: Ext.getBody()
            });
        } else {
            store.add({
                name: vName,
                doj: vDOJ,
                age: vAge,
                active: vIsActive
            });
        }
        }