Center.js 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. /*
  2. This file is part of Ext JS 4
  3. Copyright (c) 2011 Sencha Inc
  4. Contact: http://www.sencha.com/contact
  5. GNU General Public License Usage
  6. This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file. Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
  7. If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
  8. */
  9. /**
  10. * @class Ext.ux.layout.Center
  11. * @extends Ext.layout.container.Fit
  12. * <p>This is a very simple layout style used to center contents within a container. This layout works within
  13. * nested containers and can also be used as expected as a Viewport layout to center the page layout.</p>
  14. * <p>As a subclass of FitLayout, CenterLayout expects to have a single child panel of the container that uses
  15. * the layout. The layout does not require any config options, although the child panel contained within the
  16. * layout must provide a fixed or percentage width. The child panel's height will fit to the container by
  17. * default, but you can specify <tt>autoHeight:true</tt> to allow it to autosize based on its content height.
  18. * Example usage:</p>
  19. * <pre><code>
  20. // The content panel is centered in the container
  21. var p = Ext.create('Ext.Panel', {
  22. title: 'Center Layout',
  23. layout: 'ux.center',
  24. items: [{
  25. title: 'Centered Content',
  26. widthRatio: 0.75,
  27. html: 'Some content'
  28. }]
  29. });
  30. // If you leave the title blank and specify no border
  31. // you'll create a non-visual, structural panel just
  32. // for centering the contents in the main container.
  33. var p = Ext.create('Ext.Panel', {
  34. layout: 'ux.center',
  35. border: false,
  36. items: [{
  37. title: 'Centered Content',
  38. width: 300,
  39. autoHeight: true,
  40. html: 'Some content'
  41. }]
  42. });
  43. </code></pre>
  44. */
  45. Ext.define('Ext.ux.layout.Center', {
  46. extend: 'Ext.layout.container.Fit',
  47. alias: 'layout.ux.center',
  48. // private
  49. setItemSize : function(item, width, height) {
  50. this.owner.addCls('ux-layout-center');
  51. item.addCls('ux-layout-center-item');
  52. if (height > 0) {
  53. if (width) {
  54. width = item.width;
  55. if (Ext.isNumber(item.widthRatio)) {
  56. width = Math.round(this.owner.el.getWidth() * item.widthRatio);
  57. }
  58. }
  59. item.setSize(width, height);
  60. item.margins.left = Math.round((this.owner.el.getWidth() - width) * 0.5);
  61. }
  62. }
  63. });