Ext菜单和工具栏

创建一个简单的工具条

创建一个简单的工具条，包含4个按钮。

代码：

Ext.onReady(function() {

var toolbar = new Ext.Toolbar();

toolbar.render("toolbar");

toolbar.add({

text:"新建",

handler:function() {

Ext.Msg.alert("新建");

}

},{

text:"编辑",

handler:function() {

Ext.Msg.alert("编辑");

}

},{

text:"保存",

handler:function() {

Ext.Msg.alert("保存");

}

},{

text:"退出",

handler:function() {

Ext.Msg.alert("退出");

}

});

});

效果：

 

26.2向菜单添加分割线

有2种方式：

1. 使用连字符或’separator’作为参数。

2. 用Ext.menu.Separator作为参数。

 

26.3多级菜单

创建Ext.menu.Menu，然后添加到Ext.Toolbar。

示例：

Ext.BLANK_IMAGE_URL = '../../resources/images/default/s.gif';

Ext.onReady(function() {

var toolbar = new Ext.Toolbar();

toolbar.render("toolbar");

toolbar.add({

text:"编辑",

handler:function() {

Ext.Msg.alert("编辑");

}

},{

text:"保存",

handler:function() {

Ext.Msg.alert("保存");

}

},{

text:"退出",

handler:function() {

Ext.Msg.alert("退出");

}

});

 

//toolbar.add("-");

//toolbar.add("separator");

//toolbar.add(new Ext.menu.Separator());

 

var history = new Ext.menu.Menu({

items:[

{text:"今天"},

{text:"昨天"},

{text:"上周"},

{text:"上个月",menu:new Ext.menu.Menu({

items:[{text:"1号"},

{text:"2号"},

{text:"3号"},

{text:"4号"},

{text:"5号"}

]})}

]

});

var menu = new Ext.menu.Menu({

items:[

{text:"新建"},

{text:"编辑"},

{text:"保存"},

"-",

{text:"历史日期",menu:history},

"-",

{text:"退出"}

]

});

toolbar.add({

text:"文件",

menu:menu

});

});

 

效果：

 

26.4日期菜单

Ext提供了日期菜单Ext.menu.DateMenu，可以直接添加到菜单中。

示例：

toolbar.add({

text:"日期",

menu:new Ext.menu.DateMenu({

listeners:{

select:function(datepicker,date) {

Ext.Msg.alert("","你选择的日期是：" + date.format("Y/m/d"));

}

}

})

});

效果：

 

26.5颜色选择

Ext提供了颜色选择菜单Ext.color.ColorMenu，可以直接添加到菜单中。

示例：

toolbar.add({

text:"颜色",

menu:new Ext.menu.ColorMenu({

listeners:{

select:function(colorpalette,color) {

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

}

}

})

});

效果：

 

26.6Ext.menu.Adapter菜单适配器

它的作用是把非菜单组建封装成菜单组建，然后我们就可以把封装好的组建添加到菜单中。

示例：

var form= new Ext.form.FormPanel({

labelAlign:"right",

title:"输入信息",

items:[

{

fieldLabel:"用户名",

xtype:"textfield"

},

{

fieldLabel:"密码",

xtype:"textfield"

}

],

buttons:[

{

text:"保存"

}

]

});

 

varinputMenu = newExt.menu.Adapter(form,{

hideOnClick:false

});

 

var fm = new Ext.menu.Menu({

items:[inputMenu]

});

 

toolbar.add({

text:"表单菜单",

menu:fm

});

 

效果：