Popup with Grid as well as submit button using Extjs

Question

In our application we are using Extjs. Now I need a pop up with a grid and a cancel and submit button. So that I can select some records from the grid and save the record to DB.

I tried Ext.Window for popup.

I think items attribute in the Ext.Window can hold only one type of object ( means the object of Ext.grid.GridPanel or form). But I need both controls.

How can I implement both controls with in a popup window?

Please give your valueable information about this.

Thanks in advance.

But I have given object of both, grid and form. but showing only first object. Given like as following, items: [grid,form]. — Sajith A.K.
var myData = [['ddd', '1111'], ['eee', '2222']]; var store = new Ext.data.ArrayStore({ fields: [ { name: 'FLD', type: 'string' }, { name: 'VAL', type: 'string' } ] }); store.loadData(myData); var grid = new Ext.grid.GridPanel({ store: store, loadMask: true, columns: [ { header: 'FLD', dataIndex: 'FLD' }, { header: 'VAL', dataIndex: 'VAL' } ], viewConfig: { forceFit: true } }); — Sajith A.K.
var form = Ext.widget('form', { layout: { type: 'vbox', align: 'stretch' }, border: false, bodyPadding: 10, fieldDefaults: { labelAlign: 'top', labelWidth: 100, labelStyle: 'font-weight:bold' } ,buttons: [{ text: 'Submit', handler: function () { if (this.up('form').getForm().isValid()) { this.up('form').getForm().reset(); this.up('window').hide(); } } }] }); — Sajith A.K.
var myWin = new Ext.Window({ layout: 'fit', title: 'Test', width: 400, height: 300, closable: true, buttonAlign: 'center', items: [grid,form], modal: true }); myWin.show(); — Sajith A.K.

weeksdev weeksdev · Accepted Answer · 2014-03-19T21:44:26

Given you're code submitted in the comments (btw, you can edit your question to include in the question).

You can either add multiple objects to the items array or, in this case, I would add a buttons bar to the bottom (bbar)

Here is code demonstrating this, Additionally here is working fiddle:

        var myData = [
            ['ddd', '1111'],
            ['eee', '2222']
        ];
        var store = new Ext.data.ArrayStore({
            fields: [{
                name: 'FLD',
                type: 'string'
            }, {
                name: 'VAL',
                type: 'string'
            }]
        });
        store.loadData(myData);
        var grid = new Ext.grid.GridPanel({
            store: store,
            loadMask: true,
            //renderTo:Ext.getBody(),
            columns: [{
                header: 'FLD',
                dataIndex: 'FLD'
            }, {
                header: 'VAL',
                dataIndex: 'VAL'
            }],
            viewConfig: {
                forceFit: true
            }
        });

        var window = Ext.create('Ext.window.Window', {
            title: 'My Title',
            height: 400,
            width: 600,
            items: [
            grid
            ],
            bbar: [{
                text: 'Save',
                handler: function(btn) {
                    alert('Save!');
                }
            }, {
                text: 'Cancel',
                handler: function(btn) {
                    alert('Cancel!');
                }
            }]
        });
        window.show();

Popup with Grid as well as submit button using Extjs

1 Answers