ExtJs工具栏设置实例

最新推荐文章于 2018-05-17 16:17:39 发布

Vezn

最新推荐文章于 2018-05-17 16:17:39 发布

阅读量453

点赞数

分类专栏：前端文章标签： ext

本文链接：https://blog.csdn.net/vezn_king/article/details/53749912

版权

前端专栏收录该内容

26 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
    <link href="Ext4.2/resources/css/ext-all.css" rel="stylesheet" />
    <script src="Ext4.2/bootstrap.js"></script>
    <script>
        Ext.onReady(function () {
            var toolbar = new Ext.toolbar.Toolbar({ renderTo: "toolbar", width: 500 });

            toolbar.add({
                text: "新建" 
            },
            {
                text: "打开",
            },
            {
                text: "保存",
            },
            {
                text: "编辑",
            },
            '-',
            {
                xtype: "textfield",
                hideLabel: true,
                width:150
            },
            '->',
            '<a href=#>超链接</a>',
            {xtype:'tbspacer',width:50},
            '静态文本'



            );
            function onButtonClick(btn)
            {
                alert(btn.id + ":" + btn.text);
            }

            Ext.get("enabledBtn").on("click", function () {
                toolbar.enable();
            });

            Ext.get("disabledBtn").on("click", function () {
                toolbar.disable();
            });
        });
    </script>
</head>
<body>
    <div id="toolbar"></div>
    <input type="button" id="enabledBtn" value="启用" />
    <input type="button" id="disabledBtn" value="禁用" />
</body>
</html>