extjs学习----官方模版注释3

本篇是有关于 窗口基本布局的。里面有两个属性。我暂时还没了解到。有人知道的,拿砖砸下我。。。砸醒我。。。

  
  
  
  
  1. <html>   
  2. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">    
  3. <head>       
  4. <title>test page</title>       
  5. <link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css"/>       
  6. <script type="text/javascript" src="../adapter/ext/ext-base.js"></script>       
  7. <script type="text/javascript" src="../ext-all.js"></script>       
  8. <script type="text/javascript">           
  9. Ext.onReady(function(){               
  10. var button = Ext.get('show-btn');//本句不解释               
  11. button.on('click',function(){                       
  12. //tabs for the center                   
  13. var tabs = new Ext.TabPanel({                       
  14. region:'center',//使用border布局时,定位属性                       
  15. margins:'3 3 3 0',                       
  16. activeTab:0,//指出初始化时活动的tab选项,默认为都不活动。                       
  17. defaults:{//应用在全体组件上的配置项对象,也就是说全部的对象                           
  18. autoScroll:true// 当出现内容溢出时,会出现滚动条,false则不会                       
  19. },                       
  20. items:[{                           
  21. title:'bogus tab',                           
  22. html:'the first tab'                       
  23. },{                           
  24. title:'another tab',                           
  25. html:'the second tab'                       
  26. },{                           
  27. title:'Closable tab',                           
  28. html: 'the tab can be closed!',                           
  29. closable:true//带有关闭小叉叉的                       
  30. }]                   
  31. });                   
  32. //Panel for the west                   
  33. var nav = new Ext.Panel({                       
  34. title:'navigation',                       
  35. region:'west',                       
  36. split:'false',                       
  37. width:200,                       
  38. collapsible:true,                       
  39. margins:'3 0 3 3',//????                       
  40. cmargins:'3 3 3 3'//????                   
  41. });                   
  42. var win = new Ext.Window({                       
  43. title:'Layout Window',                       
  44. closable:true,                       
  45. width:600,                       
  46. height:400,                       
  47. plain:true,                       
  48. layout:'border',                       
  49. items:[nav,tabs]//将前面定义好的两个面板添加到window中                   
  50. });                   
  51. win.show(button);               
  52. });           
  53. });       
  54. </script>   
  55. </head>   
  56. <body>       
  57. <input type="button" id="show-btn" value="show window"/>   
  58. </body>   
  59. </html> 

 

你可能感兴趣的:(学习,content,extjs学习,官方模版注释)