修复面板 extjs 4.2 的大小

Question

我正在尝试创建一个表单，该表单被一个小框包围并位于页面中间。我试图更改面板边框的宽度和高度失败。并尝试通过将 region 属性更改为 center 来使表单居中，但表单仍位于页面的左上角。请帮忙解决这个问题？

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。