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

});

 

效果：