examples/panel/panel.js

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