Fixing the size of a panel extjs 4.2

Question

I'm trying to create a form that is surrounded with a small box and centered in the middle of my page. I tried to change the width and height of the panel border failed. And tried to center the form by changing the region property to center but the form remained at top left corner of the page. Any help in fixing this please?

Ext.onReady(function(){

    LeaseNumber = Ext.create('Ext.form.TextField', {
        id : 'LeaseNumber',
        padding: '5 5 5 5',
        fieldLabel: '<span style="font-size: 13px">Lease Number</span>',
        width :'27%'
    });

    Company_Name = Ext.create('Ext.form.TextField', {
        id : 'CompanyName',
        padding: '5 5 5 5',
        fieldLabel: '<span style="font-size: 13px">Company Name</span>',
        width :'27%'
    });

    period = Ext.create('Ext.data.Store', {
        fields: ['abbr','value','name'],
        data : [
            {"abbr":"daterange", "value":"daterange",  "name":"Date Range"},
            {"abbr":"sixmonths", "value":"sixmonths",  "name":"6 Months"},
            {"abbr":"threemonths", "value":"threemonths", "name":"3 Months"},
            {"abbr":"onemonth", "value":"onemonth",  "name":"1 Month"},
            {"abbr":"fifteendays", "value":"fifteendays",  "name":"15 Days"},
            {"abbr":"sevendays", "value":"sevendays",  "name":"7 Days"},
            {"abbr":"oneday", "value":"oneday",  "name":"1 Day"}
        ]
    });

    period_duration = Ext.create('Ext.form.ComboBox', {
        store: period,
        queryMode: 'local',
        displayField: 'name',
        padding: '5 5 5 5',
        valueField: 'abbr',
        fieldLabel: '<span style="font-size: 13px">Date Range</span>',
        id:'type',
        editable:false,
        width: '25%',
        listeners: { 
        },
           //remove the cursor from the drop-down selection
        onFocus: function() {
        var me = this;

        if (!me.isExpanded) {
            me.expand()
        }
        me.getPicker().focus();
        },
    });

    Date_Range = Ext.create('Ext.form.Panel', {
        renderTo: Ext.getBody(),
        width: '25%',
        bodyPadding: 10,
        bodyStyle: 'background-color:#dfe8f5;',
        border:false,
        items: [{
            xtype: 'datefield',
            anchor: '100%',
            fieldLabel: '<span style="font-size: 13px">From</span>',
            name: 'from_date',
            maxValue: new Date()  // limited to the current date or prior
        }, {
            xtype: 'datefield',
            anchor: '100%',
            fieldLabel: '<span style="font-size: 13px">To</span>',
            name: 'to_date',
            value: new Date()  
        }]
    });

    Submit = Ext.create('Ext.Button', {
        text : '<span style="font-size: 11px">View Records</span>' , 
        margin:'20 30 30 70',
        padding:'3 3 3 3',
        id : 'view_records',
        //handler : onButtonClick
        });

    Clear = Ext.create('Ext.Button', {
        text : '<span style="font-size: 11px">Clear</span>' , 
        padding:'3 3 3 3',
        margin:'20 30 30 0',
        id : 'clear',
        //handler : onButtonClick
        });

    lease_info_panel = Ext.create('Ext.panel.Panel', {
        region :'center',
        id:'lease_info_panel',
        bodyStyle: 'background-color:#dfe8f5;',
        padding:'10 0 10 0',
        items : [LeaseNumber,Company_Name,period_duration,Date_Range,Submit,Clear] 
    });

    form_panel = Ext.create('Ext.panel.Panel', {
        region :'center',
        layout : 'border',      
        width: '50%',
        items : [lease_info_panel]
    });

    viewport = Ext.create('Ext.container.Viewport', {
        layout : 'border' ,
        renderTo :'body',
        items : [form_panel]
    });

});

Alexander Alexander · Accepted Answer · 2015-12-25T21:40:57

region:'center' doesn't do anything unless the parent container/panel has layout:'border', and what it does can be found in the border layout docs: region:'center' does only work relatively to the other items in the layout.

The child item in the center region will always be resized to fill the remaining space not used by the other regions in the layout.

region:'south' is below, region:'north' is above, region:'west' is left, region:'east' is right, and region:'center' is between them, but not necessarily centered. (e.g. if some of the other regions have especially big items or no items at all).

What you are possibly searching for is a Window:

Ext.create('Ext.window.Window',{
    width:200,
    height:200,
    title:'ABC',
    draggable:false,
    closable:false
}).show();

Compare fiddle.

Fixing the size of a panel extjs 4.2

1 Answers