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

<!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>

工具栏

效果：

http://www.tof2k.com/ext/formbuilder/，导出json参数，然后。。。相当方便。否则手工码砖，效率可知了。

工具栏的启用和禁用，有二个方法：enable()和disable()

posted on 2017-11-01 14:44 USEGEAR 阅读(1304) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

USEGEAR

导航

公告

统计

搜索

常用链接

最新随笔

我的标签

合集 (3)

随笔分类 (367)

随笔档案 (326)

文章分类 (4)

文章档案 (4)

delphi

other

关注的技术博客

我喜欢的博客

综合技术

阅读排行榜

推荐排行榜

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