JavaScript DHTML/Ext JS/SplitButton

Материал из Web эксперт
Перейти к: навигация, поиск

Add arrow alignment and icon alignment for SplitButton

  
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<script type="text/javascript">
Ext.onReady(function() {
    var btnHandler = function(btn) {
        alert("alert");
    }

    var menuItems = [
        {
            text    : "Add",
            iconCls : "icon-add"
        },
        {
            text    : "Remove",
            iconCls : "icon-delete"
        }
    ];

    new Ext.SplitButton({
        renderTo   : Ext.getBody(),
        iconCls    : "icon-add",
        text       : " iconAlign : "left"",
        arrowAlign : "bottom", // top, left, right
        iconAlign  : "left",
        handler    : btnHandler,
        menu       : menuItems
    }); 
});

</script>
<body>

</body>
</html>



Add dropdown menu to SplitButton

  

<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<script type="text/javascript">
Ext.onReady(function() {
    var btnHandler = function(btn) {
        alert("alert");
    }

    var menuItems = [
        {
            text    : "Add",
            iconCls : "icon-add"
        },
        {
            text    : "Remove",
            iconCls : "icon-delete"
        }
    ];

    new Ext.SplitButton({
        renderTo : Ext.getBody(),
        text     : "With Menu",
        handler  : btnHandler,
        menu     : menuItems
    });   
});

</script>
<body>

</body>
</html>



Simple SplitButton

  
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<script type="text/javascript">
Ext.onReady(function() {
    var btnHandler = function(btn) {
        alert("alert");
    }
    new Ext.SplitButton({
        renderTo : Ext.getBody(),
        text     : "Plain SplitButton",
        handler  : btnHandler
    });    
});

</script>
<body>

</body>
</html>
Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/Ext_JS/SplitButton&oldid=2367»