Фиксация размера панели extjs 4.2

Question

Я пытаюсь создать форму, которая окружена маленькой коробкой и центрирована в середине моей страницы. Я попытался изменить ширину и высоту границы панели. И попытался центрировать форму, изменив свойство области на центр, но форма осталась в верхнем левом углу страницы. Любая помощь в исправлении этого, пожалуйста?

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] 
    }); 

}); 

Answer 1

region:'center' ничего не делать, если родительский контейнер/панель не имеет layout:'border', и что он делает, можно найти в border layout docs: region:'center' ли работать только относительно других элементов в макете.

Детский элемент в центральной области всегда будет изменен, чтобы заполнить оставшееся пространство, не используемое другими регионами в макете.

region:'south' ниже, region:'north' выше, region:'west' остается, region:'east' является правильным, и region:'center' между ними, но не обязательно по центру. (например, если в некоторых других регионах есть особенно большие предметы или вообще нет предметов).

То, что вы, возможно, ищете это Window:

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

Сравнить fiddle.