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

中间件编程

开发平台:

JavaScript

  1. /*!  * Ext JS Library 3.0.0  * Copyright(c) 2006-2009 Ext JS, LLC  * licensing@extjs.com  * http://www.extjs.com/license  */ Ext.onReady(function() {
  2. Ext.QuickTips.init();
  3.     
  4.     // create some portlet tools using built in Ext tool ids
  5.     var tools = [{
  6.         id:'gear',
  7.         handler: function(){
  8.             Ext.Msg.alert('Message', 'The Settings tool was clicked.');
  9.         }
  10.     },{
  11.         id:'close',
  12.         handler: function(e, target, panel){
  13.             panel.ownerCt.remove(panel, true);
  14.         }
  15.     }];
  16.     var viewport = new Ext.Viewport({
  17.         layout:'fit',
  18.         items:[{
  19.             xtype: 'grouptabpanel',
  20.      tabWidth: 130,
  21.      activeGroup: 0,
  22.      items: [{
  23.      mainItem: 1,
  24.      items: [{
  25.      title: 'Tickets',
  26.                     layout: 'fit',
  27.                     iconCls: 'x-icon-tickets',
  28.                     tabTip: 'Tickets tabtip',
  29.                     style: 'padding: 10px;',
  30.      items: [new SampleGrid([0,1,2,3,4])]
  31.      }, 
  32.                 {
  33.                     xtype: 'portal',
  34.                     title: 'Dashboard',
  35.                     tabTip: 'Dashboard tabtip',
  36.                     items:[{
  37.                         columnWidth:.33,
  38.                         style:'padding:10px 0 10px 10px',
  39.                         items:[{
  40.                             title: 'Grid in a Portlet',
  41.                             layout:'fit',
  42.                             tools: tools,
  43.                             items: new SampleGrid([0, 2, 3])
  44.                         },{
  45.                             title: 'Another Panel 1',
  46.                             tools: tools,
  47.                             html: Ext.example.shortBogusMarkup
  48.                         }]
  49.                     },{
  50.                         columnWidth:.33,
  51.                         style:'padding:10px 0 10px 10px',
  52.                         items:[{
  53.                             title: 'Panel 2',
  54.                             tools: tools,
  55.                             html: Ext.example.shortBogusMarkup
  56.                         },{
  57.                             title: 'Another Panel 2',
  58.                             tools: tools,
  59.                             html: Ext.example.shortBogusMarkup
  60.                         }]
  61.                     },{
  62.                         columnWidth:.33,
  63.                         style:'padding:10px',
  64.                         items:[{
  65.                             title: 'Panel 3',
  66.                             tools: tools,
  67.                             html: Ext.example.shortBogusMarkup
  68.                         },{
  69.                             title: 'Another Panel 3',
  70.                             tools: tools,
  71.                             html: Ext.example.shortBogusMarkup
  72.                         }]
  73.                     }]                    
  74.                 }, {
  75.      title: 'Subscriptions',
  76.                     iconCls: 'x-icon-subscriptions',
  77.                     tabTip: 'Subscriptions tabtip',
  78.                     style: 'padding: 10px;',
  79. layout: 'fit',
  80.      items: [{
  81. xtype: 'tabpanel',
  82. activeTab: 1,
  83. items: [{
  84. title: 'Nested Tabs',
  85. html: Ext.example.shortBogusMarkup
  86. }]
  87. }]
  88.      }, {
  89.      title: 'Users',
  90.                     iconCls: 'x-icon-users',
  91.                     tabTip: 'Users tabtip',
  92.                     style: 'padding: 10px;',
  93.      html: Ext.example.shortBogusMarkup
  94.      }]
  95.             }, {
  96.                 expanded: true,
  97.                 items: [{
  98.                     title: 'Configuration',
  99.                     iconCls: 'x-icon-configuration',
  100.                     tabTip: 'Configuration tabtip',
  101.                     style: 'padding: 10px;',
  102.                     html: Ext.example.shortBogusMarkup 
  103.                 }, {
  104.                     title: 'Email Templates',
  105.                     iconCls: 'x-icon-templates',
  106.                     tabTip: 'Templates tabtip',
  107.                     style: 'padding: 10px;',
  108.                     html: Ext.example.shortBogusMarkup
  109.                 }]
  110.             }]
  111. }]
  112.     });
  113. });