toolbar示例

太过爱你忘了你带给我的痛 2021-12-01 14:54 312阅读 0赞

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Address_Manager</title>
        <link rel="Stylesheet" type="text/css" href="ext-4/resources/css/ext-all.css" />
        <link rel="Stylesheet" type="text/css" href="ext-4/resources/css/ext-all-access-debug.css" />
        <link rel="Stylesheet" type="text/css" href="ext-4/resources/css/ext-all-access.css" />
        <link rel="Stylesheet" type="text/css" href="ext-4/resources/css/ext-all-debug.css" />
        <link rel="Stylesheet" type="text/css" href="ext-4/resources/css/ext-standard.css" />
        <link rel="Stylesheet" type="text/css" href="ext-4/resources/css/ext-ie.css" />
        <script type="text/javascript" src="ext-4/ext-all.js"></script>     
        
    </head>
    <body>
    <script type="text/javascript">
        Ext.onReady(function () {
            var Toolbar = new Ext.toolbar.Toolbar(
            {
                renderTo: 'toolbar',
                width: 300
            });
            var fileMenu = new Ext.menu.Menu({
                items: [{
                    xtype: 'textfield',
                    hideLabel: true,
                    width: 100
                }, {
                    text: "颜色选择",
                    menu: new Ext.menu.ColorPicker()
                }, {
                    xtype: 'datepicker'
                }, {
                    xtype: 'buttongroup',
                    columns: 3,
                    title: '按钮组',
                    items: [{
                        text: '用户管理',
                        scale: 'large',
                        colspan: 3,
                        width: 170,
                        iconCls: 'userManagerIcon',
                        iconAlign: 'top'
                    }, {
                        text: '新建', iconCls: 'newIcon'
                    },
                    {
                        text: '打开', iconCls: 'openIcon'
                    }, {
                        text: '保存', iconCls: 'saveIcon'
                    }]
                }]
            })
            Toolbar.add({ text: '文件', menu: fileMenu });
        });
    </script>
    <div id='toolbar'></div>
    </body>
    </html>

转载于:https://www.cnblogs.com/super86/archive/2013/03/31/2991798.html