开通博客赚积分
发布资源赚积分
分类

源码开发语言/平台
当前位置：首页 > 源码/资料 > 中间件编程 > 查看源码
buttons.js
资源名称：ext-3.0.0.zip　[点击查看]
上传用户：shuoshiled
上传日期：2018-01-28
资源大小：10124k
文件大小：4k
源码类别：

中间件编程

开发平台：

JavaScript

buttons.js：源码内容
  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. Ext.onReady(function(){
  9.     // This function renders a block of buttons
  10.     function renderButtons(title){
  12.         Ext.getBody().createChild({tag: 'h2', html: title});
  14.         new ButtonPanel(
  15.             'Text Only',
  16.             [{
  17.                 text: 'Add User'
  18.             },{
  19.                 text: 'Add User',
  20.                 scale: 'medium'
  21.             },{
  22.                 text: 'Add User',
  23.                 scale: 'large'
  24.             }]
  25.         );
  27.         new ButtonPanel(
  28.             'Icon Only',
  29.             [{
  30.                 iconCls: 'add16'
  31.             },{
  32.                 iconCls: 'add24',
  33.                 scale: 'medium'
  34.             },{
  35.                 iconCls: 'add',
  36.                 scale: 'large'
  37.             }]
  38.         );
  40.         new ButtonPanel(
  41.             'Icon and Text (left)',
  42.             [{
  43.                 text: 'Add User',
  44.                 iconCls: 'add16'
  45.             },{
  46.                 text: 'Add User',
  47.                 iconCls: 'add24',
  48.                 scale: 'medium'
  49.             },{
  50.                 text: 'Add User',
  51.                 iconCls: 'add',
  52.                 scale: 'large'
  53.             }]
  54.         );
  56.         new ButtonPanel(
  57.             'Icon and Text (top)',
  58.             [{
  59.                 text: 'Add User',
  60.                 iconCls: 'add16',
  61.                 iconAlign: 'top'
  62.             },{
  63.                 text: 'Add User',
  64.                 iconCls: 'add24',
  65.                 scale: 'medium',
  66.                 iconAlign: 'top'
  67.             },{
  68.                 text: 'Add User',
  69.                 iconCls: 'add',
  70.                 scale: 'large',
  71.                 iconAlign: 'top'
  72.             }]
  73.         );
  75.         new ButtonPanel(
  76.             'Icon and Text (right)',
  77.             [{
  78.                 text: 'Add User',
  79.                 iconCls: 'add16',
  80.                 iconAlign: 'right'
  81.             },{
  82.                 text: 'Add User',
  83.                 iconCls: 'add24',
  84.                 scale: 'medium',
  85.                 iconAlign: 'right'
  86.             },{
  87.                 text: 'Add User',
  88.                 iconCls: 'add',
  89.                 scale: 'large',
  90.                 iconAlign: 'right'
  91.             }]
  92.         );
  94.         new ButtonPanel(
  95.             'Icon and Text (bottom)',
  96.             [{
  97.                 text: 'Add User',
  98.                 iconCls: 'add16',
  99.                 iconAlign: 'bottom'
  100.             },{
  101.                 text: 'Add User',
  102.                 iconCls: 'add24',
  103.                 scale: 'medium',
  104.                 iconAlign: 'bottom'
  105.             },{
  106.                 text: 'Add User',
  107.                 iconCls: 'add',
  108.                 scale: 'large',
  109.                 iconAlign: 'bottom'
  110.             }]
  111.         );
  112.     }
  114.     renderButtons('Normal Buttons');
  116.     ButtonPanel.override({
  117.         enableToggle: true
  118.     });
  120.     renderButtons('Toggle Buttons');
  122.     ButtonPanel.override({
  123.         enableToggle : undefined,
  124.         menu : {items: [{text:'Menu Item 1'},{text:'Menu Item 2'},{text:'Menu Item 3'}]}
  125.     });
  127.     renderButtons('Menu Buttons');
  129.     ButtonPanel.override({
  130.         split: true,
  131.         defaultType: 'splitbutton'
  132.     });
  134.     renderButtons('Split Buttons');
  136.     ButtonPanel.override({
  137.         split: false,
  138.         defaultType: 'button',
  139.         arrowAlign: 'bottom'
  140.     });
  142.     renderButtons('Menu Buttons (Arrow on bottom)');
  144.     ButtonPanel.override({
  145.         split: true,
  146.         defaultType: 'splitbutton'
  147.     });
  149.     renderButtons('Split Buttons (Arrow on bottom)');
  150. });
  152. // Helper class for organizing the buttons
  153. ButtonPanel = Ext.extend(Ext.Panel, {
  154.     layout:'table',
  155.     defaultType: 'button',
  156.     baseCls: 'x-plain',
  157.     cls: 'btn-panel',
  158.     renderTo : 'docbody',
  159.     menu: undefined,
  160.     split: false,
  162.     layoutConfig: {
  163.         columns:3
  164.     },
  166.     constructor: function(desc, buttons){
  167.         // apply test configs
  168.         for(var i = 0, b; b = buttons[i]; i++){
  169.             b.menu = this.menu;
  170.             b.enableToggle = this.enableToggle;
  171.             b.split = this.split;
  172.             b.arrowAlign = this.arrowAlign;
  173.         }
  174.         var items = [{
  175.             xtype: 'box',
  176.             autoEl: {tag: 'h3', html: desc, style:"padding:15px 0 3px;"},
  177.             colspan: 3
  178.         }].concat(buttons);
  180.         ButtonPanel.superclass.constructor.call(this, {
  181.             items: items
  182.         });
  183.     }
  184. });