固定面板 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' 不会做任何事情，除非父 container/panel 有 layout:'border'，它所做的可以在 border layout docs 中找到：region:'center'仅相对于布局中的其他项目起作用。

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'在下，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.

固定面板 extjs 4.2 的大小

Fixing the size of a panel extjs 4.2

javascript

html

css

extjs

extjs4.2