buttons.js
上传用户:dawnssy
上传日期:2022-08-06
资源大小:9345k
文件大小:4k
源码类别:

JavaScript

开发平台:

JavaScript

  1. /*!
  2.  * Ext JS Library 3.1.0
  3.  * Copyright(c) 2006-2009 Ext JS, LLC
  4.  * licensing@extjs.com
  5.  * http://www.extjs.com/license
  6.  */
  7. Ext.onReady(function(){
  8.     // This function renders a block of buttons
  9.     function renderButtons(title){
  10.         Ext.getBody().createChild({tag: 'h2', html: title});
  11.         new ButtonPanel(
  12.             'Text Only',
  13.             [{
  14.                 text: 'Add User'
  15.             },{
  16.                 text: 'Add User',
  17.                 scale: 'medium'
  18.             },{
  19.                 text: 'Add User',
  20.                 scale: 'large'
  21.             }]
  22.         );
  23.         new ButtonPanel(
  24.             'Icon Only',
  25.             [{
  26.                 iconCls: 'add16'
  27.             },{
  28.                 iconCls: 'add24',
  29.                 scale: 'medium'
  30.             },{
  31.                 iconCls: 'add',
  32.                 scale: 'large'
  33.             }]
  34.         );
  35.         new ButtonPanel(
  36.             'Icon and Text (left)',
  37.             [{
  38.                 text: 'Add User',
  39.                 iconCls: 'add16'
  40.             },{
  41.                 text: 'Add User',
  42.                 iconCls: 'add24',
  43.                 scale: 'medium'
  44.             },{
  45.                 text: 'Add User',
  46.                 iconCls: 'add',
  47.                 scale: 'large'
  48.             }]
  49.         );
  50.         new ButtonPanel(
  51.             'Icon and Text (top)',
  52.             [{
  53.                 text: 'Add User',
  54.                 iconCls: 'add16',
  55.                 iconAlign: 'top'
  56.             },{
  57.                 text: 'Add User',
  58.                 iconCls: 'add24',
  59.                 scale: 'medium',
  60.                 iconAlign: 'top'
  61.             },{
  62.                 text: 'Add User',
  63.                 iconCls: 'add',
  64.                 scale: 'large',
  65.                 iconAlign: 'top'
  66.             }]
  67.         );
  68.         new ButtonPanel(
  69.             'Icon and Text (right)',
  70.             [{
  71.                 text: 'Add User',
  72.                 iconCls: 'add16',
  73.                 iconAlign: 'right'
  74.             },{
  75.                 text: 'Add User',
  76.                 iconCls: 'add24',
  77.                 scale: 'medium',
  78.                 iconAlign: 'right'
  79.             },{
  80.                 text: 'Add User',
  81.                 iconCls: 'add',
  82.                 scale: 'large',
  83.                 iconAlign: 'right'
  84.             }]
  85.         );
  86.         new ButtonPanel(
  87.             'Icon and Text (bottom)',
  88.             [{
  89.                 text: 'Add User',
  90.                 iconCls: 'add16',
  91.                 iconAlign: 'bottom'
  92.             },{
  93.                 text: 'Add User',
  94.                 iconCls: 'add24',
  95.                 scale: 'medium',
  96.                 iconAlign: 'bottom'
  97.             },{
  98.                 text: 'Add User',
  99.                 iconCls: 'add',
  100.                 scale: 'large',
  101.                 iconAlign: 'bottom'
  102.             }]
  103.         );
  104.     }
  105.     renderButtons('Normal Buttons');
  106.     ButtonPanel.override({
  107.         enableToggle: true
  108.     });
  109.     renderButtons('Toggle Buttons');
  110.     ButtonPanel.override({
  111.         enableToggle : undefined,
  112.         menu : {items: [{text:'Menu Item 1'},{text:'Menu Item 2'},{text:'Menu Item 3'}]}
  113.     });
  114.     renderButtons('Menu Buttons');
  115.     ButtonPanel.override({
  116.         split: true,
  117.         defaultType: 'splitbutton'
  118.     });
  119.     renderButtons('Split Buttons');
  120.     ButtonPanel.override({
  121.         split: false,
  122.         defaultType: 'button',
  123.         arrowAlign: 'bottom'
  124.     });
  125.     renderButtons('Menu Buttons (Arrow on bottom)');
  126.     ButtonPanel.override({
  127.         split: true,
  128.         defaultType: 'splitbutton'
  129.     });
  130.     renderButtons('Split Buttons (Arrow on bottom)');
  131. });
  132. // Helper class for organizing the buttons
  133. ButtonPanel = Ext.extend(Ext.Panel, {
  134.     layout:'table',
  135.     defaultType: 'button',
  136.     baseCls: 'x-plain',
  137.     cls: 'btn-panel',
  138.     renderTo : 'docbody',
  139.     menu: undefined,
  140.     split: false,
  141.     layoutConfig: {
  142.         columns:3
  143.     },
  144.     constructor: function(desc, buttons){
  145.         // apply test configs
  146.         for(var i = 0, b; b = buttons[i]; i++){
  147.             b.menu = this.menu;
  148.             b.enableToggle = this.enableToggle;
  149.             b.split = this.split;
  150.             b.arrowAlign = this.arrowAlign;
  151.         }
  152.         var items = [{
  153.             xtype: 'box',
  154.             autoEl: {tag: 'h3', html: desc, style:"padding:15px 0 3px;"},
  155.             colspan: 3
  156.         }].concat(buttons);
  157.         ButtonPanel.superclass.constructor.call(this, {
  158.             items: items
  159.         });
  160.     }
  161. });