Extjs-工具条和菜单 Ext.menu和Ext.Toolbar

转载自：http://blog.csdn.net/itlwc/article/details/7878002

1.创建一个简单工具条
效果图



[javascript] view plaincopy

<script type="text/javascript" defer>

Ext.onReady(function(){

// 创建带三个按钮的工具条

var tb = new Ext.Toolbar({

width : 300,

items : [{

text: '新建'

},{

text: '修改'

},{

text: '删除'

}]

});

// 为工具条再添加一个按钮

tb.add({

text: '显示'

});

//tb.doLayout();//重新计算容器的布局尺寸

new Ext.Viewport({

items: [tb]

});

});

</script>

2.创建一个简单菜单
效果图



代码

[javascript] view plaincopy

<script type="text/javascript" defer>

Ext.onReady(function(){

//创建工具条

var tb = new Ext.Toolbar({

width : 300

});

//创建一个菜单

var menuFile = new Ext.menu.Menu();

menuFile.add({text: '新建'});

menuFile.add('-');

menuFile.add({text: '打开'});

menuFile.add('separator');

menuFile.add({text: '保存'});

menuFile.add(new Ext.menu.Separator());

menuFile.add({text: '关闭'});

// 为工具条再添加一个菜单

tb.add({

text: '文件',

menu: menuFile

});

//tb.doLayout();//重新计算容器的布局尺寸

new Ext.Viewport({

items: [tb]

});

});

</script>

3.多级菜单

[javascript] view plaincopy

<script type="text/javascript" defer>

Ext.onReady(function(){

var menuFile = new Ext.menu.Menu({

items:[{

text: '历史',

menu: [{

text: '今天'

},{

text: '昨天'

}]

}]

});

var tb = new Ext.Toolbar({

width : 300,

items : [{

text: '文件',

menu : menuFile

}]

});

new Ext.Viewport({

items: [tb]

});

});

</script>

4.多选菜单

[plain] view plaincopy

单选和多选都使用Ext.menu.CheckItem,唯一不用的是group参数

效果图



代码

[javascript] view plaincopy

<script type="text/javascript" defer>

Ext.onReady(function(){

var menuCheck = new Ext.menu.Menu({

items : [

new Ext.menu.CheckItem({

text : '粗体',

checkHandler : function(item,checked){

Ext.Msg.alert('多选',(checked ? '选中':'取消')+'粗体');

}

}),

new Ext.menu.CheckItem({

text : '斜体',

checkHandler : function(item,checked){

Ext.Msg.alert('多选',(checked ? '选中':'取消')+'斜体');

}

})

]

});

var tb = new Ext.Toolbar({

items : [{

text : '字形',

menu : menuCheck

}]

});

new Ext.Viewport({

items : [tb]

});

});

</script>

5.单选按钮菜单

[plain] view plaincopy

单选和多选都使用Ext.menu.CheckItem,唯一不用的是group参数

效果图



代码

[javascript] view plaincopy

<script type="text/javascript" defer>

Ext.onReady(function(){

var menuRadio = new Ext.menu.Menu({

items : [

new Ext.menu.CheckItem({

text : '宋体',

group : 'font',

checkHandler : function(item,checked){

Ext.Msg.alert('单选',(checked ? '选中':'取消')+'宋体');

}

}),

new Ext.menu.CheckItem({

text : '黑体',

group : 'font',

checkHandler : function(item,checked){

Ext.Msg.alert('单选',(checked ? '选中':'取消')+'黑体');

}

}),

new Ext.menu.CheckItem({

text : '楷体',

group : 'font',

checkHandler : function(item,checked){

Ext.Msg.alert('单选',(checked ? '选中':'取消')+'楷体');

}

})

]

});

var tb = new Ext.Toolbar({

items : [{

text : '字体',

menu : menuRadio

}]

});

new Ext.Viewport({

items : [tb]

});

});

</script>

6.日期菜单
效果图



代码

[javascript] view plaincopy

<script type="text/javascript" defer>

Ext.onReady(function(){

var tb = new Ext.Toolbar({

items : [{

text : '日期',

menu : new Ext.menu.DateMenu({

handler : function(dp, date){

Ext.Msg.alert('选择日期', '选择的日期是 {0}.', date.format('Y年m月d日'));

}

})

}]

});

new Ext.Viewport({

items : [tb]

});

});

</script>

7.颜色菜单

[plain] view plaincopy

Ext本身一些问题,颜色选中的时候handler会执行两次,第二次的参数传入一个event对象,

所以要加typeof进行判断,以免出现问题

最后颜色值返回6位的字符串,在它前面加#就可以使用了

效果图



代码

[javascript] view plaincopy

<script type="text/javascript" defer>

Ext.onReady(function(){

var tb = new Ext.Toolbar({

items : [{

text : '颜色',

menu: new Ext.menu.ColorMenu({

handler : function(cm, color){

if (typeof color == 'string') {

Ext.Msg.alert('选择颜色', '选择的颜色是 ' + color);

}

}

})

}]

});

new Ext.Viewport({

items : [tb]

});

});

</script>

8.右键弹出菜单

[javascript] view plaincopy

<script type="text/javascript">

Ext.onReady(function(){

var contextmenu = new Ext.menu.Menu({

items: [{

text: '新建'

},{

text: '修改'

},{

text: '删除'

},{

text: '显示'

}]

});

Ext.get(document).on('contextmenu', function(e) {

e.preventDefault();

contextmenu.showAt(e.getXY());

});

});

</script>

9.使用Ext.menu.MenuMgr统一管理菜单

[plain] view plaincopy

Ext为我们提供了MenuMgr来统一管理页面上的所有菜单

每创建一个菜单都会注册到Ext.menu.MenuMgr中,可以使用MenuMgr的函数对菜单进行操作,

Ext.menu.MenuMgr是一个单例,我们不需要创建就可以直接调用功能函数get(),根据id获取对应的菜单

代码

[javascript] view plaincopy

var menuWj = new Ext.menu.Menu({

id: 'menu1',

allowOtherMenus: true,

items: [

{text: '今天'},

{text: '昨天'}

]

});

Ext.get('showButton').on('click', function() {

//获取menu实例

var menu1 = Ext.menu.MenuMgr.get('menu1');

menu1.show(tb.el);

Ext.getDoc().removeAllListeners();

});

Ext.get('hideButton').on('click', function() {

Ext.menu.MenuMgr.hideAll();

});

10工具条加文本框和时间框
效果图



代码

[javascript] view plaincopy

<script type="text/javascript">

Ext.onReady(function(){

var tb = new Ext.Toolbar({

items : [

'文本框',

new Ext.form.TextField({

name: 'text'

}),

'时间框',

new Ext.form.DateField({

name: 'date'

})

]

});

new Ext.Viewport({

items : [tb]

});

});

</script>

11工具条加HTML标签
效果图



代码

[javascript] view plaincopy

<script type="text/javascript">

Ext.onReady(function(){

var tb = new Ext.Toolbar({

items : [

'<span style="color:red;font-weight:bold;">红字</span>',

'<input type="text">',

'<button>按钮</button>'

]

});

new Ext.Viewport({

items : [tb]

});

});

</script>

12.工具条加按钮的三种方法

[javascript] view plaincopy

<script type="text/javascript">

Ext.onReady(function(){

var tb = new Ext.Toolbar({

items : [{

text : '按钮1'

},

new Ext.Button({

text : '按钮2'

}),

new Ext.Toolbar.Button({

text : '按钮3'

})]

});

new Ext.Viewport({

items : [tb]

});

});

</script>

13. Ext.Toolbar.Spacer

[plain] view plaincopy

Ext.Toolbar.Spacer向菜单添加空白元素,

xtype = tbspacer它是一个2px的空白

[javascript] view plaincopy

tb.add({

xtype : 'tbspacer'

});

14. Ext.Toolbar.Separator

[plain] view plaincopy

Ext.Toolbar.Separator向菜单添加一个竖线

xtype = tbseparator 或者 –

[javascript] view plaincopy

tb.add({

xtype : 'tbseparator'

});

15. Ext.Toolbar.Fill

[plain] view plaincopy

将处于它右侧的工具条组件以右对齐的方式排列在工具条右侧

xtype=tbfill 或者->

[javascript] view plaincopy

tb.add({

xtype : 'tbfill'

});