一些常用DOS命令
2010-07-08 11:05
507 查看
面板中可以有工具栏,工具栏可以位于面板顶部或底部,Ext中工具栏是由Ext.Toolbar类来表示。工具栏上可以放按钮、文本、分隔符等内容。面板对象中内置了很多实用的工具,可以直接通过面板的tools配置选项往面板头部加入预定义的工具栏选项。
这里工具栏主要用于面板中(panel,window等)
这里我们使用toolbar.js toolbar.html来进行演示
下面我们演示一下在window中应用工具栏
我们先创建一个window
我们可以看到右上角有一个关闭按钮 那其实就是一个头部工具栏按钮
window中有一个tools的配置选项,他的作用就是定义这个头部的工具栏,他接收的是一个数组
数组中的元素包含id,handle等一系列属性,其中id的值是通过Ext事先定义的一系列中选择填入的,handler是对应的响应事件。handler可以传递三个参数 Event,toolEl,panel
这里还有一些属性比如qtip,on这里的on很特殊,可以是我们自定义的一些事件 比如鼠标移入等等具体可以参见addListener
这里需要说明的是在使用qtip之前需要调用Ext的qtip初始化方法
tbar属性是顶部工具栏,可以有数组和object
我们先来看看ToolBar类,ToolBar的构造方法可以通过object或者数组类型的配置选项进行创建
我们看到这里面得工具栏 不过我们并没有添加工具,下面我们向里面添加一些工具项。
这里我们通过add方法进行添加
由于只是文本item所以没有什么按钮效果
我们再来加几个
这里Fill很有意思 通过他我们可以实现对齐方式
Spacer是空格 Separator是分隔符 add方法可以是多个参数
当然也可以通过配置选项的方式 不适用new
上面的两句是等效的
一般我们是不会指定toolbar的宽高,他会自适应
默认toolbar的参数是button
这里的Ext.ToolBar.Button中有一个pressed : Boolean
表示是否显示已按下状态
这里还有一个SplitButton 我们在里面可以看到他有一个menu的配置选项,他可以给我们呈现出下拉菜单按钮
这里需要注意win.getTopToolbar()必须写在win.show()方法之后,因为必须先进行渲染才能取得一些他的一些东西
当然也可以通过window中的tbar:【】进行添加toolbar中的相关信息
与tbar对应的还有一个bbar只不过位置是在底部,使用上面还是一样的
这里工具栏主要用于面板中(panel,window等)
这里我们使用toolbar.js toolbar.html来进行演示
下面我们演示一下在window中应用工具栏
我们先创建一个window
Ext.onReady(function(){ var win = new Ext.Window({ width:400, height:300, title:"窗体" }); win.show(); });
我们可以看到右上角有一个关闭按钮 那其实就是一个头部工具栏按钮
window中有一个tools的配置选项,他的作用就是定义这个头部的工具栏,他接收的是一个数组
数组中的元素包含id,handle等一系列属性,其中id的值是通过Ext事先定义的一系列中选择填入的,handler是对应的响应事件。handler可以传递三个参数 Event,toolEl,panel
Ext.onReady(function(){ var win = new Ext.Window({ width:400, height:300, title:"窗体", tools:[{ id:"toggle" },{ id:"close" },{ id:"help" }] }); win.show(); });
这里还有一些属性比如qtip,on这里的on很特殊,可以是我们自定义的一些事件 比如鼠标移入等等具体可以参见addListener
这里需要说明的是在使用qtip之前需要调用Ext的qtip初始化方法
Ext.onReady(function(){ Ext.QuickTips.init(); var win = new Ext.Window({ width:400, height:300, title:"窗体", tools:[{ id:"toggle", handler:function(e,t,p){ }, qtip:"hello" },{ id:"close" },{ id:"help" }] }); win.show(); });
tbar属性是顶部工具栏,可以有数组和object
我们先来看看ToolBar类,ToolBar的构造方法可以通过object或者数组类型的配置选项进行创建
Ext.onReady(function(){ Ext.QuickTips.init(); var win = new Ext.Window({ width:400, height:300, title:"窗体", tools:[{ id:"toggle", handler:function(e,t,p){ }, qtip:"hello" },{ id:"close" },{ id:"help" }], tbar:new Ext.Toolbar({ width:200, height:50 }) }); win.show(); });
我们看到这里面得工具栏 不过我们并没有添加工具,下面我们向里面添加一些工具项。
这里我们通过add方法进行添加
Ext.onReady(function(){ Ext.QuickTips.init(); var win = new Ext.Window({ width:400, height:300, title:"窗体", tools:[{ id:"toggle", handler:function(e,t,p){ }, qtip:"hello" },{ id:"close" },{ id:"help" }], tbar:new Ext.Toolbar({ width:200, height:50 }) }); win.show(); win.getTopToolbar().add(new Ext.Toolbar.TextItem("titem")) });
由于只是文本item所以没有什么按钮效果
我们再来加几个
Ext.onReady(function(){ Ext.QuickTips.init(); var win = new Ext.Window({ width:400, height:300, title:"窗体", tools:[{ id:"toggle", handler:function(e,t,p){ }, qtip:"hello" },{ id:"close" },{ id:"help" }], tbar:new Ext.Toolbar({ width:200, height:50 }) }); win.show(); win.getTopToolbar().add(new Ext.Toolbar.Fill()); win.getTopToolbar().add(new Ext.Toolbar.TextItem("titem")); win.getTopToolbar().add(new Ext.Toolbar.Button({text:"bitem"})); });
这里Fill很有意思 通过他我们可以实现对齐方式
Ext.onReady(function(){ Ext.QuickTips.init(); var win = new Ext.Window({ width:400, height:300, title:"窗体", tools:[{ id:"toggle", handler:function(e,t,p){ }, qtip:"hello" },{ id:"close" },{ id:"help" }], tbar:new Ext.Toolbar({ width:200, height:50 }) }); win.show(); win.getTopToolbar().add(new Ext.Toolbar.Fill()); win.getTopToolbar().add(new Ext.Toolbar.TextItem("titem")); win.getTopToolbar().add(new Ext.Toolbar.Spacer()); win.getTopToolbar().add(new Ext.Toolbar.Separator()); win.getTopToolbar().add([new Ext.Toolbar.Spacer(),new Ext.Toolbar.Spacer()]); win.getTopToolbar().add(new Ext.Toolbar.Button({text:"bitem"})); });
Spacer是空格 Separator是分隔符 add方法可以是多个参数
当然也可以通过配置选项的方式 不适用new
win.getTopToolbar().add(new Ext.Toolbar.Fill()); win.getTopToolbar().add({xtype:"tbfill"});
上面的两句是等效的
一般我们是不会指定toolbar的宽高,他会自适应
默认toolbar的参数是button
tbar:new Ext.Toolbar({ //width:200, //height:50 }) }); win.show(); win.getTopToolbar().add({text:"defButton"}); win.getTopToolbar().add(new Ext.Toolbar.TextItem("titem")); win.getTopToolbar().add(new Ext.Toolbar.Spacer()); win.getTopToolbar().add(new Ext.Toolbar.Separator()); win.getTopToolbar().add([new Ext.Toolbar.Spacer(),new Ext.Toolbar.Spacer()]); win.getTopToolbar().add(new Ext.Toolbar.Button({text:"bitem"}));
这里的Ext.ToolBar.Button中有一个pressed : Boolean
表示是否显示已按下状态
这里还有一个SplitButton 我们在里面可以看到他有一个menu的配置选项,他可以给我们呈现出下拉菜单按钮
win.getTopToolbar().add({text:"defButton",pressed:true}); win.getTopToolbar().add(new Ext.Toolbar.TextItem("titem")); win.getTopToolbar().add(new Ext.Toolbar.Spacer()); win.getTopToolbar().add(new Ext.Toolbar.Separator()); win.getTopToolbar().add([new Ext.Toolbar.Spacer(),new Ext.Toolbar.Spacer()]); win.getTopToolbar().add(new Ext.Toolbar.Button({text:"bitem"})); var menu = new Ext.menu.Menu({ items:[{ text:"first" },"-",{ text:"second" }] }) win.getTopToolbar().add(new Ext.Toolbar.SplitButton({ text:"splitbutton", menu:menu }));
这里需要注意win.getTopToolbar()必须写在win.show()方法之后,因为必须先进行渲染才能取得一些他的一些东西
当然也可以通过window中的tbar:【】进行添加toolbar中的相关信息
Ext.onReady(function(){ Ext.QuickTips.init(); var win = new Ext.Window({ width:400, height:300, title:"窗体", tools:[{ id:"toggle", handler:function(e,t,p){ }, qtip:"hello" },{ id:"close" },{ id:"help" }], tbar:[new Ext.Toolbar.Spacer(),new Ext.Toolbar.Spacer()] }); win.show(); });
与tbar对应的还有一个bbar只不过位置是在底部,使用上面还是一样的
Ext.onReady(function(){ Ext.QuickTips.init(); var win = new Ext.Window({ width:400, height:300, title:"窗体", tools:[{ id:"toggle", handler:function(e,t,p){ }, qtip:"hello" },{ id:"close" },{ id:"help" }], tbar:new Ext.Toolbar({ //width:200, //height:50 }), bbar:[new Ext.Toolbar.Button({text:"bitem"})] }); win.show();
相关文章推荐
- Windows环境下的一些常用dos命令
- [转】一些常用的DOS网络命令
- Windows环境下的一些常用dos命令
- 一些常用的DOS网络命令
- dos中一些常用命令的errorlevel返回值
- dos中一些常用命令的errorlevel返回值
- DOS中一些常用的命令
- 一些常用DOS命令 转载整合
- DOS 下一些常用的好玩的命令
- DOS的一些常用命令
- 常用的一些DOS命令
- DOS常用命令集锦
- 一些常用的提高效率的工具及常用命令(持续更新)
- DOS常用命令详解
- 7-30git总结一些常用的命令
- DOS常用命令
- 一些常用的基本命令(一)
- 千个常用DOS命令全面收藏
- 数据库和表结构得一些基本常用命令总结
- dos系统下的常用命令