• 88. [ExtJS2.1教程-5]ToolBar(工具栏)


    转自:https://llying.iteye.com/blog/324681

    面板中可以有工具栏,工具栏可以位于面板顶部或底部,Ext中工具栏是由Ext.Toolbar类来表示。工具栏上可以放按钮、文本、分隔符等内容。面板对象中内置了很多实用的工具,可以直接通过面板的tools配置选项往面板头部加入预定义的工具栏选项。

    这里工具栏主要用于面板中(panel,window等)
    这里我们使用toolbar.js toolbar.html来进行演示

    下面我们演示一下在window中应用工具栏
    我们先创建一个window

    1 Ext.onReady(function(){
    2     var win = new Ext.Window({
    3         400,
    4         height:300,
    5         title:"窗体"
    6     });
    7     win.show();
    8 });

    我们可以看到右上角有一个关闭按钮 那其实就是一个头部工具栏按钮
    window中有一个tools的配置选项,他的作用就是定义这个头部的工具栏,他接收的是一个数组
    数组中的元素包含id,handle等一系列属性,其中id的值是通过Ext事先定义的一系列中选择填入的,handler是对应的响应事件。handler可以传递三个参数 Event,toolEl,panel

     1 Ext.onReady(function(){
     2     var win = new Ext.Window({
     3         400,
     4         height:300,
     5         title:"窗体",
     6         tools:[{
     7             id:"toggle"
     8         },{
     9             id:"close"
    10         },{
    11             id:"help"
    12         }]
    13     });
    14     win.show();
    15 });

    这里还有一些属性比如qtip,on这里的on很特殊,可以是我们自定义的一些事件 比如鼠标移入等等具体可以参见addListener
    这里需要说明的是在使用qtip之前需要调用Ext的qtip初始化方法

     1 Ext.onReady(function(){
     2     Ext.QuickTips.init();
     3     var win = new Ext.Window({
     4         400,
     5         height:300,
     6         title:"窗体",
     7         tools:[{
     8             id:"toggle",
     9             handler:function(e,t,p){
    10                 
    11                 },
    12             qtip:"hello"
    13         },{
    14             id:"close"
    15         },{
    16             id:"help"
    17         }]
    18     });
    19     win.show();
    20 });

    tbar属性是顶部工具栏,可以有数组和object
    我们先来看看ToolBar类,ToolBar的构造方法可以通过object或者数组类型的配置选项进行创建

     1 Ext.onReady(function(){
     2     Ext.QuickTips.init();
     3     var win = new Ext.Window({
     4         400,
     5         height:300,
     6         title:"窗体",
     7         tools:[{
     8             id:"toggle",
     9             handler:function(e,t,p){
    10                 
    11                 },
    12             qtip:"hello"
    13         },{
    14             id:"close"
    15         },{
    16             id:"help"
    17         }],
    18         tbar:new Ext.Toolbar({
    19             200,
    20             height:50
    21         })
    22     });
    23     win.show();
    24 });

    我们看到这里面得工具栏 不过我们并没有添加工具,下面我们向里面添加一些工具项。
    这里我们通过add方法进行添加

     1 Ext.onReady(function(){
     2     Ext.QuickTips.init();
     3     var win = new Ext.Window({
     4         400,
     5         height:300,
     6         title:"窗体",
     7         tools:[{
     8             id:"toggle",
     9             handler:function(e,t,p){
    10                 
    11                 },
    12             qtip:"hello"
    13         },{
    14             id:"close"
    15         },{
    16             id:"help"
    17         }],
    18         tbar:new Ext.Toolbar({
    19             200,
    20             height:50
    21         })
    22     });
    23     win.show();
    24     win.getTopToolbar().add(new Ext.Toolbar.TextItem("titem"))
    25 });

    由于只是文本item所以没有什么按钮效果

    我们再来加几个

     1 Ext.onReady(function(){
     2     Ext.QuickTips.init();
     3     var win = new Ext.Window({
     4         400,
     5         height:300,
     6         title:"窗体",
     7         tools:[{
     8             id:"toggle",
     9             handler:function(e,t,p){
    10                 
    11                 },
    12             qtip:"hello"
    13         },{
    14             id:"close"
    15         },{
    16             id:"help"
    17         }],
    18         tbar:new Ext.Toolbar({
    19             200,
    20             height:50
    21         })
    22     });
    23     win.show();
    24     win.getTopToolbar().add(new Ext.Toolbar.Fill());
    25     win.getTopToolbar().add(new Ext.Toolbar.TextItem("titem"));
    26     win.getTopToolbar().add(new Ext.Toolbar.Button({text:"bitem"}));
    27     
    28 });

    这里Fill很有意思 通过他我们可以实现对齐方式

     1 Ext.onReady(function(){
     2     Ext.QuickTips.init();
     3     var win = new Ext.Window({
     4         400,
     5         height:300,
     6         title:"窗体",
     7         tools:[{
     8             id:"toggle",
     9             handler:function(e,t,p){
    10                 
    11                 },
    12             qtip:"hello"
    13         },{
    14             id:"close"
    15         },{
    16             id:"help"
    17         }],
    18         tbar:new Ext.Toolbar({
    19             200,
    20             height:50
    21         })
    22     });
    23     win.show();
    24     win.getTopToolbar().add(new Ext.Toolbar.Fill());
    25     win.getTopToolbar().add(new Ext.Toolbar.TextItem("titem"));
    26     win.getTopToolbar().add(new Ext.Toolbar.Spacer());
    27     win.getTopToolbar().add(new Ext.Toolbar.Separator());
    28     win.getTopToolbar().add([new Ext.Toolbar.Spacer(),new Ext.Toolbar.Spacer()]);
    29     win.getTopToolbar().add(new Ext.Toolbar.Button({text:"bitem"}));
    30     
    31 });

    Spacer是空格 Separator是分隔符 add方法可以是多个参数

    当然也可以通过配置选项的方式 不适用new

     1 win.getTopToolbar().add(new Ext.Toolbar.Fill());

    2 win.getTopToolbar().add({xtype:"tbfill"}); 

    上面的两句是等效的
    一般我们是不会指定toolbar的宽高,他会自适应
    默认toolbar的参数是button

     1         tbar:new Ext.Toolbar({
     2             //200,
     3             //height:50
     4         })
     5     });
     6     win.show();
     7     win.getTopToolbar().add({text:"defButton"});
     8     win.getTopToolbar().add(new Ext.Toolbar.TextItem("titem"));
     9     win.getTopToolbar().add(new Ext.Toolbar.Spacer());
    10     win.getTopToolbar().add(new Ext.Toolbar.Separator());
    11     win.getTopToolbar().add([new Ext.Toolbar.Spacer(),new Ext.Toolbar.Spacer()]);
    12     win.getTopToolbar().add(new Ext.Toolbar.Button({text:"bitem"}));

    这里的Ext.ToolBar.Button中有一个pressed : Boolean
    表示是否显示已按下状态
    这里还有一个SplitButton 我们在里面可以看到他有一个menu的配置选项,他可以给我们呈现出下拉菜单按钮

     1 win.getTopToolbar().add({text:"defButton",pressed:true});
     2     win.getTopToolbar().add(new Ext.Toolbar.TextItem("titem"));
     3     win.getTopToolbar().add(new Ext.Toolbar.Spacer());
     4     win.getTopToolbar().add(new Ext.Toolbar.Separator());
     5     win.getTopToolbar().add([new Ext.Toolbar.Spacer(),new Ext.Toolbar.Spacer()]);
     6     win.getTopToolbar().add(new Ext.Toolbar.Button({text:"bitem"}));
     7     
     8     var menu = new Ext.menu.Menu({
     9         items:[{
    10             text:"first"
    11         },"-",{
    12             text:"second"
    13         }]
    14     })
    15     win.getTopToolbar().add(new Ext.Toolbar.SplitButton({
    16         text:"splitbutton",
    17         menu:menu
    18     }));

    这里需要注意win.getTopToolbar()必须写在win.show()方法之后,因为必须先进行渲染才能取得一些他的一些东西
    当然也可以通过window中的tbar:【】进行添加toolbar中的相关信息

     1 Ext.onReady(function(){
     2     Ext.QuickTips.init();
     3     var win = new Ext.Window({
     4         400,
     5         height:300,
     6         title:"窗体",
     7         tools:[{
     8             id:"toggle",
     9             handler:function(e,t,p){
    10                 
    11                 },
    12             qtip:"hello"
    13         },{
    14             id:"close"
    15         },{
    16             id:"help"
    17         }],
    18         tbar:[new Ext.Toolbar.Spacer(),new Ext.Toolbar.Spacer()]
    19     });
    20     win.show();
    21 });

    与tbar对应的还有一个bbar只不过位置是在底部,使用上面还是一样的

     1 Ext.onReady(function(){
     2     Ext.QuickTips.init();
     3     var win = new Ext.Window({
     4         400,
     5         height:300,
     6         title:"窗体",
     7         tools:[{
     8             id:"toggle",
     9             handler:function(e,t,p){
    10                 
    11                 },
    12             qtip:"hello"
    13         },{
    14             id:"close"
    15         },{
    16             id:"help"
    17         }],
    18         tbar:new Ext.Toolbar({
    19             //200,
    20             //height:50
    21         }),
    22         bbar:[new Ext.Toolbar.Button({text:"bitem"})]
    23     });
    24     win.show();
  • 相关阅读:
    python flask 环境安装
    pymongo的说明,挺详细的
    Mysql加锁过程详解
    MySQL Group Replication 介绍
    Linux 下方便的ssh非交互工具sshpass的安装与使用
    我要拿Offer之AQS条件队列及中断机制
    ThreadLocal解析
    AQS源码分析总结
    动手实现一个同步器(AQS)
    java线程池解析
  • 原文地址:https://www.cnblogs.com/sharpest/p/7676819.html
Copyright © 2020-2023  润新知