layout-browser.js
上传用户:shuoshiled
上传日期:2018-01-28
资源大小:10124k
文件大小:3k
源码类别:

中间件编程

开发平台:

JavaScript

  1. /*!
  2.  * Ext JS Library 3.0.0
  3.  * Copyright(c) 2006-2009 Ext JS, LLC
  4.  * licensing@extjs.com
  5.  * http://www.extjs.com/license
  6.  */
  7. //
  8. // This is the main layout definition.
  9. //
  10. Ext.onReady(function(){
  11. Ext.QuickTips.init();
  12. // This is an inner body element within the Details panel created to provide a "slide in" effect
  13. // on the panel body without affecting the body's box itself.  This element is created on
  14. // initial use and cached in this var for subsequent access.
  15. var detailEl;
  16. // This is the main content center region that will contain each example layout panel.
  17. // It will be implemented as a CardLayout since it will contain multiple panels with
  18. // only one being visible at any given time.
  19. var contentPanel = {
  20. id: 'content-panel',
  21. region: 'center', // this is what makes this panel into a region within the containing layout
  22. layout: 'card',
  23. margins: '2 5 5 0',
  24. activeItem: 0,
  25. border: false,
  26. items: [
  27. // from basic.js:
  28. start, absolute, accordion, anchor, border, cardTabs, cardWizard, column, fit, form, table, vbox, hbox,
  29. // from custom.js:
  30. rowLayout, centerLayout,
  31. // from combination.js:
  32. absoluteForm, tabsNestedLayouts
  33. ]
  34. };
  35.     
  36. // Go ahead and create the TreePanel now so that we can use it below
  37.     var treePanel = new Ext.tree.TreePanel({
  38.      id: 'tree-panel',
  39.      title: 'Sample Layouts',
  40.         region:'north',
  41.         split: true,
  42.         height: 300,
  43.         minSize: 150,
  44.         autoScroll: true,
  45.         
  46.         // tree-specific configs:
  47.         rootVisible: false,
  48.         lines: false,
  49.         singleExpand: true,
  50.         useArrows: true,
  51.         
  52.         loader: new Ext.tree.TreeLoader({
  53.             dataUrl:'tree-data.json'
  54.         }),
  55.         
  56.         root: new Ext.tree.AsyncTreeNode()
  57.     });
  58.     
  59. // Assign the changeLayout function to be called on tree node click.
  60.     treePanel.on('click', function(n){
  61.      var sn = this.selModel.selNode || {}; // selNode is null on initial selection
  62.      if(n.leaf && n.id != sn.id){  // ignore clicks on folders and currently selected node 
  63.      Ext.getCmp('content-panel').layout.setActiveItem(n.id + '-panel');
  64.      if(!detailEl){
  65.      var bd = Ext.getCmp('details-panel').body;
  66.      bd.update('').setStyle('background','#fff');
  67.      detailEl = bd.createChild(); //create default empty div
  68.      }
  69.      detailEl.hide().update(Ext.getDom(n.id+'-details').innerHTML).slideIn('l', {stopFx:true,duration:.2});
  70.      }
  71.     });
  72.     
  73. // This is the Details panel that contains the description for each example layout.
  74. var detailsPanel = {
  75. id: 'details-panel',
  76.         title: 'Details',
  77.         region: 'center',
  78.         bodyStyle: 'padding-bottom:15px;background:#eee;',
  79. autoScroll: true,
  80. html: '<p class="details-info">When you select a layout from the tree, additional details will display here.</p>'
  81.     };
  82. // Finally, build the main layout once all the pieces are ready.  This is also a good
  83. // example of putting together a full-screen BorderLayout within a Viewport.
  84.     new Ext.Viewport({
  85. layout: 'border',
  86. title: 'Ext Layout Browser',
  87. items: [{
  88. xtype: 'box',
  89. region: 'north',
  90. applyTo: 'header',
  91. height: 30
  92. },{
  93. layout: 'border',
  94.      id: 'layout-browser',
  95.         region:'west',
  96.         border: false,
  97.         split:true,
  98. margins: '2 0 5 5',
  99.         width: 275,
  100.         minSize: 100,
  101.         maxSize: 500,
  102. items: [treePanel, detailsPanel]
  103. },
  104. contentPanel
  105. ],
  106.         renderTo: Ext.getBody()
  107.     });
  108. });