学习EXTJS6（6）基本功能-工具栏和菜单

最新推荐文章于 2021-05-26 23:23:43 发布

转载最新推荐文章于 2021-05-26 23:23:43 发布 · 194 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/usegear/p/7765526.html

文章标签：

#javascript #json #ViewUI

本文介绍了使用ExtJS创建垂直工具栏的方法，并展示了如何添加按钮及各种表单元素如单选框、复选框等。此外，还提供了工具栏启用与禁用的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
   <head>
    <meta http-equiv="Content-Type"  content="text/html;charset=utf-8">
    <link rel="stylesheet" type="text/css" href="../../study/EXTJS/ext-4.2.1.883/resources/css/ext-all.css" />
    <script type="text/javascript" src="../../study/EXTJS/ext-4.2.1.883/bootstrap.js"></script>
    <script type="text/javascript" src="../../study/EXTJS/ext-4.2.1.883/locale/ext-lang-zh_CN.js"></script>
 <script type="text/javascript">  
    Ext.onReady(function(){
var toolbar = new Ext.toolbar.Toolbar({
    renderTo : 'toolbar',
    vertical :true,
    enableOverflow : true,
    width : 300});

    toolbar.add([
        {
            text : 'hello usegear',
            handler : onButtonClick,
            iconCls : 'newIcon'
        },
        {text:'open',handler:onButtonClick,iconCls:'openIcon'},
        {text:'save',handler:onButtonClick,iconCls:'saveIcon'}
        ]);
    function onButtonClick(btn){
        alert(btn.text);
        }

    });


</script>
   </head>
   <body>
<div id='toolbar'></div>
        </body>
</html>

包含按钮的简单工具栏

效果：

拓展思路：

<!DOCTYPE html>
<html>
   <head>
    <meta http-equiv="Content-Type"  content="text/html;charset=utf-8">
    <link rel="stylesheet" type="text/css" href="../../study/EXTJS/ext-4.2.1.883/resources/css/ext-all.css" />
    <script type="text/javascript" src="../../study/EXTJS/ext-4.2.1.883/bootstrap.js"></script>
    <script type="text/javascript" src="../../study/EXTJS/ext-4.2.1.883/locale/ext-lang-zh_CN.js"></script>
 <script type="text/javascript">  
    Ext.onReady(function(){
var toolbar = new Ext.toolbar.Toolbar({
    renderTo : 'toolbar',
    vertical :true,
    enableOverflow : true,
    width : 300});

    toolbar.add([
        {text : 'hello usegear',handler : onButtonClick,iconCls : 'newIcon'},
        {text:'open',handler:onButtonClick,iconCls:'openIcon'},
        {text:'save',handler:onButtonClick,iconCls:'saveIcon'},
{
    xtype:"radio",
    fieldLabel:"Label",
    boxLabel:"Box label",
    name:"radio",
    inputValue:"radiovalue"
  },{
    xtype:"checkbox",
    fieldLabel:"Label",
    boxLabel:"Box label",
    name:"checkbox",
    inputValue:"cbvalue"
  },{
    xtype:"datefield",
    fieldLabel:"Date",
    name:"datevalue"
  },{
    xtype:"timefield",
    fieldLabel:"Time",
    name:"timevalue"
  },{
    xtype:"numberfield",
    fieldLabel:"Number",
    name:"numbervalue"
  },{
    xtype:"textfield",
    fieldLabel:"Text",
    name:"textvalue"
  },{
    xtype:"combo",
    fieldLabel:"Text",
    name:"combovalue",
    hiddenName:"combovalue"
  },{
    xtype:"fieldset",
    title:"Legend",
    autoHeight:true
  },
        
        {xtype:"panel",
text:"Panel",
items:[{
    xtype:"checkbox",
    boxLabel:"Box label",
    name:"checkbox",
    inputValue:"cbvalue"
  },{
    xtype:"radio",
    boxLabel:"Box label",
    name:"radio",
    inputValue:"radiovalue"
  },{
    xtype:"checkbox",
    boxLabel:"Box label",
    name:"checkbox",
    inputValue:"cbvalue"
  }]
  }
  ]
        
        
        
        );
    function onButtonClick(btn){
        alert(btn.text);
        }

    });


</script>
   </head>
   <body>
<div id='toolbar'></div>
        </body>
</html>