CODEWITHSUNDEEP
extjs4
Cool Gal
Cool Gal

Reputation: 1

Grid in a border layout in extjs 4.0.0?

how to put a grid inside the center region of border layout along with the form in extjs version 4.0.0. I am able to put the form but not the grid along with it.

source code:-

Ext.onReady(function() {

    var viewport = Ext.create('Ext.container.Viewport', {
        renderTo: Ext.getBody(),
        layout: 'border',
        items: [{
            region: 'west',
            width: 200,
            collapsible: true,
            collapsed: true,
            html: 'West Region'
        }, {
            region: 'center'
        }, {
            region: 'east',
            width: 200,
            collapsible: true,
            collapsed: true,
            html: 'East Region'
        }, {
            region: 'south',
            height: 50,
            html: 'South Region'
        }]
    });

    var form = Ext.create('Ext.form.Panel', {
        renderTo: Ext.getBody(),
        title: 'User Form',
        height: 130,
        align: 'center',
        width: 280,
        bodyPadding: 10,
        defaultType: 'textfield',
        items: [
            {
                fieldLabel: 'First Name',
                name: 'firstName'
            },
            {
                fieldLabel: 'Last Name',
                name: 'lastName'
            }
        ],

        buttons: [{
            text: 'Submit',
            handler    : function () { alert("successfully submitted");}
        }]

});
    viewport.layout.regions.center.add(form);
    // using add()
    form.show()

    });

Please help me put a grid below the form in the center region of the border layout in extjs 4.0.0

Upvotes: 0

Views: 4914

Answers (4)

Armance
Armance

Reputation: 5390

instead of adding one form create both the form and grid and add them at once

try this:

var bothforms = Ext.create('Ext.form.Panel', {
    renderTo: Ext.getBody(),
    width: 600,
    layout: 'column',//or whetever u want
    items [{
    title: 'User Form',
    columnWidth: .5,
    border: false,
    height: 130,
    align: 'center',
    width: 280,
    bodyPadding: 10,
    defaultType: 'textfield',
    items: [... ]
   },{
    title : 'User Grid',
    columnWidth: .5,
    border: false,
    height: 130,
    width: 300,
    items: [... ]
}]

});
viewport.layout.regions.center.add(bothforms);
// using add()
bothforms.show()

Upvotes: 0

dbrin
dbrin

Reputation: 15673

//THis is in app.js 
    launch : function() {
            Ext.create('Ext.container.Viewport', {
                layout : {
                    type : 'border'
                },
                defaults : {
                    split : false
                },
                items : [ {
                    region : 'north',
                    id : 'mainHeader'
                }, {
                    region : 'south',
                    height : 20,
                    id : 'mainFooter'
                }, {
                    id : 'mainContent',
                    collapsible : false,
                    region : 'center',
                    layout: 'fit'
                   }

    //----This is Controller code ---
    init: function() {
            console.debug(' controller init(). ');
             this.control({
                 'viewport > #mainContent': { //look inside a viewport component for component by id='mainContent'
                    render: this.onMainReady  //attach 'onMainReady' function to the 'render' event of the above component
                 }

    //--- this is onMainReady inside controller
               //load grid into the main content
                var main = Ext.getCmp('mainContent'); //it isnot best practice to use getCmp
                main.add({
                     xtype:'mygrid',
                     id:'whateveriwant'
                });

Upvotes: 1

Tanel
Tanel

Reputation: 195

You cannot add component to borderlayout region. If u want to add more than one component to viewport center region then you must use a wrapper component.

Paragraph from doc: http://docs.sencha.com/ext-js/4-0/#/api/Ext.layout.container.Border

The regions of a BorderLayout are fixed at render time and thereafter, its child Components may not be removed or added.To add/remove Components within a BorderLayout, have them wrapped by an additional Container which is directly managed by the BorderLayout. If the region is to be collapsible, the Container used directly by the BorderLayout manager should be a Panel.

Upvotes: 0

Marko
Marko

Reputation: 5552

You should include the form and the grid in the items of the center panel and set the appropriate layout.

Upvotes: 0

Related Questions