Center.js 1.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. /**
  2. * @class Ext.ux.layout.Center
  3. * @extends Ext.layout.container.Fit
  4. * <p>This is a very simple layout style used to center contents within a container. This layout works within
  5. * nested containers and can also be used as expected as a Viewport layout to center the page layout.</p>
  6. * <p>As a subclass of FitLayout, CenterLayout expects to have a single child panel of the container that uses
  7. * the layout. The layout does not require any config options, although the child panel contained within the
  8. * layout must provide a fixed or percentage width. The child panel's height will fit to the container by
  9. * default, but you can specify <tt>autoHeight:true</tt> to allow it to autosize based on its content height.
  10. * Example usage:</p>
  11. * <pre><code>
  12. // The content panel is centered in the container
  13. var p = Ext.create('Ext.Panel', {
  14. title: 'Center Layout',
  15. layout: 'ux.center',
  16. items: [{
  17. title: 'Centered Content',
  18. widthRatio: 0.75,
  19. html: 'Some content'
  20. }]
  21. });
  22. // If you leave the title blank and specify no border
  23. // you'll create a non-visual, structural panel just
  24. // for centering the contents in the main container.
  25. var p = Ext.create('Ext.Panel', {
  26. layout: 'ux.center',
  27. border: false,
  28. items: [{
  29. title: 'Centered Content',
  30. width: 300,
  31. autoHeight: true,
  32. html: 'Some content'
  33. }]
  34. });
  35. </code></pre>
  36. */
  37. Ext.define('Ext.ux.layout.Center', {
  38. extend: 'Ext.layout.container.Fit',
  39. alias: 'layout.ux.center',
  40. // private
  41. setItemSize : function(item, width, height){
  42. this.owner.addCls('ux-layout-center');
  43. item.addCls('ux-layout-center-item');
  44. if(item && height > 0) {
  45. if (width) {
  46. width = item.width;
  47. if (Ext.isNumber(item.widthRatio)) {
  48. width = Math.round(this.owner.el.getWidth() * item.widthRatio);
  49. }
  50. }
  51. item.setSize(width, height);
  52. }
  53. }
  54. });