examples/panel/panel.js

   1 Ext.require([
   2     '*'
   3 ]);
   4
   5 Ext.onReady(function() {
   6     var html = '<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, '+
   7     'porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, '+
   8     'lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis '+
   9     'vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.<br/><br/>'+
  10     'Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing '+
  11     'eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt '+
  12     'diam nec urna. Curabitur velit. Lorem ipsum dolor sit amet.</p>';
  13
  14     var configs = [{
  15         title: 'Basic Panel',
  16         collapsible:true,
  17         width:400,
  18         html: html
  19     },{
  20         width: 320,
  21         height: 320,
  22         title: 'Masked Panel with a really long title',
  23         bodyStyle: "padding: 5px;",
  24         html: 'Some content',
  25         collapsible: true,
  26         collapseDirection: Ext.Component.DIRECTION_LEFT,
  27         listeners: {
  28             render: function(p){
  29                 p.body.mask('Loading...');
  30             },
  31             delay: 50
  32         }
  33     },{
  34         width: 150,
  35         height: 150,
  36         unstyled: true,
  37         title: 'Panel with unstyled:true',
  38         bodyPadding: 0,
  39         html: 'Some content'
  40     },{
  41         width: 150,
  42         height: 150,
  43         border: false,
  44         frame: true,
  45         title: 'Panel with border:false',
  46         html: 'Some content'
  47     },{
  48         title: 'Framed panel: Width 280/Height 180',
  49         html: html,
  50         collapsible: true,
  51         frame: true,
  52         autoScroll: true,
  53         width: 280,
  54         height: 180
  55     },{
  56         title : 'Panel as child',
  57         width : 500,
  58         height: 400,
  59         layout: 'fit',
  60         bodyStyle: 'padding:5px',
  61         items: [
  62             {
  63                 xtype: 'panel',
  64                 border: false,
  65                 layout: {
  66                     type: 'vbox',
  67                     align: 'stretch'
  68                 },
  69                 items: [
  70                     {
  71                         html: 'top, with no title',
  72                         height: 100,
  73                         margin: '0 0 5 0'
  74                     },{
  75                         xtype: 'panel',
  76                         title: 'test',
  77                         html: 'bottom',
  78                         flex: 1
  79                     }
  80                 ]
  81             }
  82         ]
  83     },{
  84         title : 'Framed panel as child',
  85         width : 300,
  86         height: 100,
  87         html  : null,
  88         layout: 'fit',
  89         items: [
  90             {
  91                 xtype: 'panel',
  92                 title: 'Framed panel',
  93                 html : '123',
  94                 frame: true
  95             }
  96         ]
  97     },{
  98         title : 'Framed panel with normal child',
  99         width : 300,
 100         height: 100,
 101         html  : null,
 102         frame: true,
 103         layout: 'fit',
 104         items: [
 105             {
 106                 xtype: 'panel',
 107                 title: 'Non-framed child',
 108                 html : 'Hello'
 109             }
 110         ]
 111     },{
 112         title: 'Width 180/No Height',
 113         animCollapse: true,
 114         collapsible: true,
 115         width: 180,
 116         html: html
 117     }];
 118
 119     Ext.each(configs, function(config) {
 120         var element = Ext.getBody().createChild({cls: 'panel-container'});
 121
 122         Ext.createWidget('panel', Ext.applyIf(config, {
 123             renderTo: element,
 124             bodyPadding: 7
 125         }));
 126     });
 127 });
 128