CODEWITHSUNDEEP
formsextjstabsgrid
Vabbs
Vabbs

Reputation: 107

Form and Grid inside a Tab in EXT-JS app

I am trying to display a search-form and grid in EXT-JS application. I am trying this:

items: [
                {
                    title: 'myTab',
                    xtype: 'myform',
                    xtype:'mygrid',
                    flex:1
                }
       ]

My Problem: When I comment out 

xtype: 'mygrid'

I can see the search form. When I uncomment the line, grid overlaps the form. how can I solve this problem?

UPDATE: I see that I need to use vbox layout. I a m trying it in various ways, but unable to figure out where it should be placed.

Upvotes: 0

Views: 1181

Answers (2)

Vabbs
Vabbs

Reputation: 107

I figured it out. This is how I added layout to the code:

items: Ext.create('Ext.tab.Panel', {
            activeTab: 0,
            layout : {            // This is how to save the form from being overlapped by the                      
                                  //grid panel.

                    type: 'vbox',

                    align: 'fit'

                },

            items: [
                {

                    title: 'Single-Activity Resource',
                    items : [

                                {

                                    xtype:'myform'

                                },

                                {

                                    xtype:'mygrid',

                                    flex: 1

                                }

                            ]
                } ...

Upvotes: 0

rixo
rixo

Reputation: 25001

You're mixing arrays (i.e. [...]), and objects (i.e. {...}).

The items option in Ext containers must be an array of objects. Objects in there can be raw configuration object or instantiated components.

So the syntax you must use looks like the following:

items: [
    {
        title: 'myTab',
        xtype: 'myform'
    },{
        title: "Grid Tab",
        xtype:'mygrid'
    }
]

See, this is similar to an array of integers like [1,2,3] except that elements are objects {...} instead of numbers.

Upvotes: 1

Related Questions