toolbar示例 

<!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>     
    <!--<script type="text/javascript" src="app.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>

 

posted @ 2013-03-31 15:33  super 86  阅读(159)  评论(0)  编辑  收藏  举报