panel.html 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <head>
  4. <title>Panels</title>
  5. <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/>
  6. <!-- GC -->
  7. <script type="text/javascript" src="../../ext-all.js"></script>
  8. </head>
  9. <body>
  10. <script type="text/javascript" charset="utf-8">
  11. Ext.onReady(function() {
  12. Ext.create('Ext.panel.Panel', {
  13. renderTo: Ext.getBody(),
  14. height: 300,
  15. width: 500,
  16. frame: false,
  17. title: 'My Panel',
  18. collapsible: true,
  19. animCollapse: 2000,
  20. layout: {
  21. type: 'hbox',
  22. align: 'stretch'
  23. },
  24. items: [
  25. {
  26. xtype: 'panel',
  27. flex: 1,
  28. frame: true,
  29. margin: '5 0 5 5',
  30. collapsible: true,
  31. collapseDirection: 'left',
  32. title: 'Second Panel',
  33. html: 'Second Panel interior'
  34. },
  35. {
  36. xtype: 'panel',
  37. flex: 2,
  38. margin: 5,
  39. title: 'Another Panel',
  40. html: 'Another'
  41. }
  42. ],
  43. tools: [
  44. {
  45. type: 'close'
  46. },
  47. {
  48. type: 'help',
  49. handler: function() {
  50. alert("There is no help");
  51. }
  52. }
  53. ]
  54. });
  55. });
  56. </script>
  57. </body>
  58. </html>