修復面板的大小extjs 4.2

我試圖創建一個被一個小框包圍並居中在頁面中間的窗體。我試圖改變面板邊框的寬度和高度失敗。並嘗試通過將區域屬性更改爲居中來對錶格居中，但表單保留在頁面的左上角。有任何幫助來解決這個問題嗎？修復面板的大小extjs 4.2

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

});

來源

2015-12-25 mikeb

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。

來源

2015-12-25 21:40:57 Alexander

修復面板的大小extjs 4.2

回答

相關問題