Ext Toolbar 练习

Ext Toolbar 练习

function  toolbarE()  {
    var Toolbar = new Ext.Toolbar({
                renderTo : "toolBar",
                width : 500
            });
    Toolbar.addButton([{
                text : "新建",
                handler : onButtonClick
            }, {
                text : "打开",
                handler : onButtonClick
            }, {
                text : "保存",
                handler : onButtonClick
            }, {
                text : "取消",
                handler : onButtonClick
            }]);
    Toolbar.addSeparator();
    Toolbar.addField(new Ext.form.TextField({
                width : 50
            }));
    Toolbar.addFill();
    Toolbar.addElement(Ext.get("A"));
    Toolbar.addSeparator();
    Toolbar.addText("静态文本");
    function onButtonClick(btn) {
        alert(btn.text);
    }
}

function  toolbarE2()  {
    Ext.BLANK_IMAGE_URL = "/learn/ext/resources/images/default/s.gif";
    var Toolbar = new Ext.Toolbar({
                renderTo : "toolBar",
                width : 300
            });
    var fileMenu = new Ext.menu.Menu({
                shadow : "frame",
                items : [{
                            text : "新建",
                            handler : onMenuItem
                        }, {
                            text : "打开",
                            handler : onMenuItem
                        }, {
                            text : "关闭",
                            handler : onMenuItem
                        }]
            });
    var editMenu = new Ext.menu.Menu({
                shadow : "drop",
                items : [{
                            text : "复制",
                            handler : onMenuItem
                        }, {
                            text : "粘贴",
                            handler : onMenuItem
                        }, {
                            text : "剪切",
                            handler : onMenuItem
                        }]
            });
    var infoMenu = new Ext.menu.Menu({
                shadow : "frame",
                items : [{
                            text : "个人信息",
                            menu : new Ext.menu.Menu({
                                        items : [{
                                                    text : "身高",
                                                    handler : onMenuItem
                                                }, {
                                                    text : "体重",
                                                    handler : onMenuItem
                                                }, {
                                                    text : "生日",
                                                    menu : new Ext.menu.DateMenu(
                                                            {
                                                                handler : onClickDate
                                                            })
                                                }]
                                    })
                        }, {
                            text : "打开",
                            handler : onMenuItem
                        }, {
                            text : "关闭",
                            handler : onMenuItem
                        }]
            });
    Toolbar.add({
                text : "文件",
                menu : fileMenu
            }, {
                text : "编辑",
                menu : editMenu
            }, {
                text : "信息",
                menu : infoMenu
            })
    function onMenuItem(item) {
        alert(item.text);
    }
    function onClickDate(dm, date) {
        alert(date.format('Y-m-j'));
    }
}
function  toolbarE3()  {
    Ext.BLANK_IMAGE_URL = "/learn/ext/resources/images/default/s.gif";
    var Toolbar = new Ext.Toolbar({
                renderTo : "toolBar",
                width : 300
            });
    var themeMenu = new Ext.menu.Menu({
                items : [{
                            text : "主题颜色",
                            menu : new Ext.menu.Menu({
                                        items : [{
                                                    text : "红色主题",
                                                    checked : true,
                                                    group : "theme",
                                                    checkHandler : onItemCheck
                                                }, {
                                                    text : "蓝色主题",
                                                    checked : false,
                                                    group : "theme",
                                                    checkHandler : onItemCheck
                                                }, {
                                                    text : "黑色主题",
                                                    checked : false,
                                                    group : "theme",
                                                    checkHandler : onItemCheck
                                                }]
                                    })
                        }, {
                            text : "是否启用",
                            checked : false
                        }]
            });
    Toolbar.add({
                text : "风格选择",
                menu : themeMenu
            })
    function onItemCheck(item) {
        alert(item.text);
    }
}
Ext.onReady(toolbarE3);