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

中间件编程

开发平台:

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. Ext.onReady(function(){
  8.    
  9.     var SamplePanel = Ext.extend(Ext.Panel, {
  10.         width: 500,
  11.         height:250,
  12.         style: 'margin-top:15px',
  13.         bodyStyle: 'padding:10px',
  14.         renderTo: 'docbody',
  15.         html: Ext.example.shortBogusMarkup,
  16.         autoScroll: true
  17.     });
  18.     new SamplePanel({
  19.         title: 'Standard',
  20.         tbar: [{
  21.             xtype:'splitbutton',
  22.             text: 'Menu Button',
  23.             iconCls: 'add16',
  24.             menu: [{text: 'Menu Button 1'}]
  25.         },'-',{
  26.             xtype:'splitbutton',
  27.             text: 'Cut',
  28.             iconCls: 'add16',
  29.             menu: [{text: 'Cut Menu Item'}]
  30.         },{
  31.             text: 'Copy',
  32.             iconCls: 'add16'
  33.         },{
  34.             text: 'Paste',
  35.             iconCls: 'add16',
  36.             menu: [{text: 'Paste Menu Item'}]
  37.         },'-',{
  38.             text: 'Format',
  39.             iconCls: 'add16'
  40.         }]
  41.     });
  42.     new SamplePanel({
  43.         title: 'Multi columns',
  44.         tbar: [{
  45.             xtype: 'buttongroup',
  46.             title: 'Clipboard',
  47.             columns: 2,
  48.             defaults: {
  49.                 scale: 'small'
  50.             },
  51.             items: [{
  52.                 xtype:'splitbutton',
  53.                 text: 'Menu Button',
  54.                 iconCls: 'add16',
  55.                 menu: [{text: 'Menu Item 1'}]
  56.             },{
  57.                 xtype:'splitbutton',
  58.                 text: 'Cut',
  59.                 iconCls: 'add16',
  60.                 menu: [{text: 'Cut Menu Item'}]
  61.             },{
  62.                 text: 'Copy',
  63.                 iconCls: 'add16'
  64.             },{
  65.                 text: 'Paste',
  66.                 iconCls: 'add16',
  67.                 menu: [{text: 'Paste Menu Item'}]
  68.             },{
  69.                 text: 'Format',
  70.                 iconCls: 'add16'
  71.             }]
  72.         },{
  73.             xtype: 'buttongroup',
  74.             title: 'Other Bugus Actions',
  75.             columns: 2,
  76.             defaults: {
  77.                 scale: 'small'
  78.             },
  79.             items: [{
  80.                 xtype:'splitbutton',
  81.                 text: 'Menu Button',
  82.                 iconCls: 'add16',
  83.                 menu: [{text: 'Menu Button 1'}]
  84.             },{
  85.                 xtype:'splitbutton',
  86.                 text: 'Cut',
  87.                 iconCls: 'add16',
  88.                 menu: [{text: 'Cut Menu Item'}]
  89.             },{
  90.                 text: 'Copy',
  91.                 iconCls: 'add16'
  92.             },{
  93.                 text: 'Paste',
  94.                 iconCls: 'add16',
  95.                 menu: [{text: 'Paste Menu Item'}]
  96.             },{
  97.                 text: 'Format',
  98.                 iconCls: 'add16'
  99.             }]
  100.         }]
  101.     });
  102.     new SamplePanel({
  103.         title: 'Multi columns (No titles, double stack)',
  104.         tbar: [{
  105.             xtype: 'buttongroup',
  106.             columns: 3,
  107.             defaults: {
  108.                 scale: 'small'
  109.             },
  110.             items: [{
  111.                 xtype:'splitbutton',
  112.                 text: 'Menu Button',
  113.                 iconCls: 'add16',
  114.                 menu: [{text: 'Menu Item 1'}]
  115.             },{
  116.                 xtype:'splitbutton',
  117.                 text: 'Cut',
  118.                 iconCls: 'add16',
  119.                 menu: [{text: 'Cut Menu Item'}]
  120.             },{
  121.                 text: 'Copy',
  122.                 iconCls: 'add16'
  123.             },{
  124.                 text: 'Paste',
  125.                 iconCls: 'add16',
  126.                 menu: [{text: 'Paste Menu Item'}]
  127.             },{
  128.                 text: 'Format',
  129.                 iconCls: 'add16'
  130.             }]
  131.         },{
  132.             xtype: 'buttongroup',
  133.             columns: 3,
  134.             defaults: {
  135.                 scale: 'small'
  136.             },
  137.             items: [{
  138.                 xtype:'splitbutton',
  139.                 text: 'Menu Button',
  140.                 iconCls: 'add16',
  141.                 menu: [{text: 'Menu Item 1'}]
  142.             },{
  143.                 xtype:'splitbutton',
  144.                 text: 'Cut',
  145.                 iconCls: 'add16',
  146.                 menu: [{text: 'Cut Menu Item'}]
  147.             },{
  148.                 text: 'Copy',
  149.                 iconCls: 'add16'
  150.             },{
  151.                 text: 'Paste',
  152.                 iconCls: 'add16',
  153.                 menu: [{text: 'Paste Menu Item'}]
  154.             },{
  155.                 text: 'Format',
  156.                 iconCls: 'add16'
  157.             }]
  158.         }]
  159.     });
  160.     new SamplePanel({
  161.         title: 'Mix and match icon sizes to create a huge unusable toolbar',
  162.         tbar: [{
  163.             xtype: 'buttongroup',
  164.             columns: 3,
  165.             title: 'Clipboard',
  166.             items: [{
  167.                 text: 'Paste',
  168.                 scale: 'large',
  169.                 rowspan: 3, iconCls: 'add',
  170.                 iconAlign: 'top',
  171.                 cls: 'x-btn-as-arrow'
  172.             },{
  173.                 xtype:'splitbutton',
  174.                 text: 'Menu Button',
  175.                 scale: 'large',
  176.                 rowspan: 3,
  177.                 iconCls: 'add',
  178.                 iconAlign: 'top',
  179.                 arrowAlign:'bottom',
  180.                 menu: [{text: 'Menu Item 1'}]
  181.             },{
  182.                 xtype:'splitbutton', text: 'Cut', iconCls: 'add16', menu: [{text: 'Cut Menu Item'}]
  183.             },{
  184.                 text: 'Copy', iconCls: 'add16'
  185.             },{
  186.                 text: 'Format', iconCls: 'add16'
  187.             }]
  188.         },{
  189.             xtype: 'buttongroup',
  190.             columns: 3,
  191.             title: 'Other Actions',
  192.             items: [{
  193.                 text: 'Paste',
  194.                 scale: 'large',
  195.                 rowspan: 3, iconCls: 'add',
  196.                 iconAlign: 'top',
  197.                 cls: 'x-btn-as-arrow'
  198.             },{
  199.                 xtype:'splitbutton',
  200.                 text: 'Menu Button',
  201.                 scale: 'large',
  202.                 rowspan: 3,
  203.                 iconCls: 'add',
  204.                 iconAlign: 'top',
  205.                 arrowAlign:'bottom',
  206.                 menu: [{text: 'Menu Button 1'}]
  207.             },{
  208.                 xtype:'splitbutton', text: 'Cut', iconCls: 'add16', menu: [{text: 'Cut Menu Item'}]
  209.             },{
  210.                 text: 'Copy', iconCls: 'add16'
  211.             },{
  212.                 text: 'Format', iconCls: 'add16'
  213.             }]
  214.         }]
  215.     });
  216.     new SamplePanel({
  217.         title: 'Medium icons, arrows to the bottom',
  218.         tbar: [{
  219.             xtype: 'buttongroup',
  220.             title: 'Clipboard',
  221.             defaults: {
  222.                 scale: 'medium',
  223.                 iconAlign:'top'
  224.             },
  225.             items: [{
  226.                 xtype:'splitbutton',
  227.                 text: 'Menu Button',
  228.                 iconCls: 'add24',
  229.                 arrowAlign:'bottom',
  230.                 menu: [{text: 'Menu Item 1'}]
  231.             },{
  232.                 xtype:'splitbutton',
  233.                 text: 'Cut',
  234.                 iconCls: 'add24',
  235.                 arrowAlign:'bottom',
  236.                 menu: [{text: 'Cut Menu Item'}]
  237.             },{
  238.                 text: 'Copy',
  239.                 iconCls: 'add24',
  240.                 cls: 'x-btn-as-arrow'
  241.             },{
  242.                 text: 'Paste',
  243.                 iconCls: 'add24',
  244.                 arrowAlign:'bottom',
  245.                 menu: [{text: 'Paste Menu Item'}]
  246.             },{
  247.                 text: 'Format<br/>Stuff',
  248.                 iconCls: 'add24'
  249.             }]
  250.         },{
  251.             xtype: 'buttongroup',
  252.             title: 'Other Bogus Actions',
  253.             defaults: {
  254.                 scale: 'medium',
  255.                 iconAlign:'top'
  256.             },
  257.             items: [{
  258.                 xtype:'splitbutton',
  259.                 text: 'Menu Button',
  260.                 iconCls: 'add24',
  261.                 arrowAlign:'bottom',
  262.                 menu: [{text: 'Menu Item 1'}]
  263.             },{
  264.                 xtype:'splitbutton',
  265.                 text: 'Cut',
  266.                 iconCls: 'add24',
  267.                 arrowAlign:'bottom',
  268.                 menu: [{text: 'Cut Menu Item'}]
  269.             },{
  270.                 text: 'Copy',
  271.                 iconCls: 'add24',
  272.                 cls: 'x-btn-as-arrow'
  273.             },{
  274.                 text: 'Paste',
  275.                 iconCls: 'add24',
  276.                 arrowAlign:'bottom',
  277.                 menu: [{text: 'Paste Menu Item'}]
  278.             },{
  279.                 text: 'Format',
  280.                 iconCls: 'add24',
  281.                 cls: 'x-btn-as-arrow'
  282.             }]
  283.         }]
  284.     });
  285.     new SamplePanel({
  286.         title: 'Medium icons, text and arrows to the left',
  287.         tbar: [{
  288.             xtype:'buttongroup',
  289.             items: [{
  290.                 text: 'Cut',
  291.                 iconCls: 'add24',
  292.                 scale: 'medium'
  293.             },{
  294.                 text: 'Copy',
  295.                 iconCls: 'add24',
  296.                 scale: 'medium'
  297.             },{
  298.                 text: 'Paste',
  299.                 iconCls: 'add24',
  300.                 scale: 'medium',
  301.                 menu: [{text: 'Paste Menu Item'}]
  302.             }]
  303.         }, {
  304.             xtype:'buttongroup',
  305.             items: [{
  306.                 text: 'Format',
  307.                 iconCls: 'add24',
  308.                 scale: 'medium'
  309.             }]
  310.         }]
  311.     });
  312.     new SamplePanel({
  313.         title: 'Small icons, text and arrows to the left',
  314.         tbar: [{
  315.             xtype:'buttongroup',
  316.             items: [{
  317.                 text: 'Cut',
  318.                 iconCls: 'add16',
  319.                 scale: 'small'
  320.             },{
  321.                 text: 'Copy',
  322.                 iconCls: 'add16',
  323.                 scale: 'small'
  324.             },{
  325.                 text: 'Paste',
  326.                 iconCls: 'add16',
  327.                 scale: 'small',
  328.                 menu: [{text: 'Paste Menu Item'}]
  329.             }]
  330.         }, {
  331.             xtype:'buttongroup',
  332.             items: [{
  333.                 text: 'Format',
  334.                 iconCls: 'add16',
  335.                 scale: 'small'
  336.             }]
  337.         }]
  338.     });
  339. });