JavaScript DHTML/Ext JS/Action

Материал из Web эксперт
Версия от 07:21, 26 мая 2010; Admin (обсуждение | вклад) (1 версия)
(разн.) ← Предыдущая | Текущая версия (разн.) | Следующая → (разн.)
Перейти к: навигация, поиск

Add action handler to action

  
<!--
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.ru
 * http://www.extjs.ru/license
 */
-->
<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>
<!-- Revised from demo code in ext3.0.0 -->
<body>
<script type="text/javascript">
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.ru
 * http://www.extjs.ru/license
 */
Ext.onReady(function(){
    // The action
    var action = new Ext.Action({
        text: "Action 1",
        handler: function(){
            Ext.example.msg("Click","You clicked on "Action 1".");
        },
        iconCls: "blist"
    });

    var panel = new Ext.Panel({
        title: "Actions",
        width:600,
        height:300,
        bodyStyle: "padding:10px;",     // lazy inline style
        tbar: [
            action, {                   // <-- Add the action directly to a toolbar
                text: "Action Menu",
                menu: [action]          // <-- Add the action directly to a menu
            }
        ],
        items: [
           new Ext.Button(action)       // <-- Add the action as a button
        ],
        renderTo: Ext.getBody()
    });
    var tb = panel.getTopToolbar();
    // Buttons added to the toolbar of the Panel above
    // to test/demo doing group operations with an action
    tb.add("->", {
        text: "Disable",
        handler: function(){
            action.setDisabled(!action.isDisabled());
            this.setText(action.isDisabled() ? "Enable" : "Disable");
        }
    }, {
        text: "Change Text",
        handler: function(){
            Ext.Msg.prompt("Enter Text", "Enter new text for Action 1:", function(btn, text){
                if(btn == "ok" && text){
                    action.setText(text);
                    action.setHandler(function(){
                        Ext.example.msg("Click","You clicked on ""+text+"".");
                    });
                }
            });
        }
    }, {
        text: "Change Icon",
        handler: function(){
            action.setIconClass(action.getIconClass() == "blist" ? "bmenu" : "blist");
        }
    });
    tb.doLayout();
});
</script>
        
</script>
</body>
</html>



Add action to form button

  
<!--
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.ru
 * http://www.extjs.ru/license
 */
-->
<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>
<!-- Revised from demo code in ext3.0.0 -->
<body>
<script type="text/javascript">
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.ru
 * http://www.extjs.ru/license
 */
Ext.onReady(function(){
    Ext.get("mb1").on("click", function(e){
        Ext.MessageBox.confirm("Confirm", "Are you sure you want to do that?", showResult);
    });
    //Add these values dynamically so they aren"t hard-coded in the html
    Ext.fly("info").dom.value = Ext.MessageBox.INFO;
    Ext.fly("question").dom.value = Ext.MessageBox.QUESTION;
    Ext.fly("warning").dom.value = Ext.MessageBox.WARNING;
    Ext.fly("error").dom.value = Ext.MessageBox.ERROR;

    function showResult(btn){
        Ext.example.msg("Button Click", "You clicked the {0} button", btn);
    };
    function showResultText(btn, text){
        Ext.example.msg("Button Click", "You clicked the {0} button and entered the text "{1}".", btn, text);
    };
});
</script>
<p>
    <b>Confirm</b><br />
    Standard Yes/No dialog.
    <button id="mb1">Show</button>
</p>
</body>
</html>



Change action text

  
<!--
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.ru
 * http://www.extjs.ru/license
 */
-->
<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>
<!-- Revised from demo code in ext3.0.0 -->
<body>
<script type="text/javascript">
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.ru
 * http://www.extjs.ru/license
 */
Ext.onReady(function(){
    // The action
    var action = new Ext.Action({
        text: "Action 1",
        handler: function(){
            Ext.example.msg("Click","You clicked on "Action 1".");
        },
        iconCls: "blist"
    });

    var panel = new Ext.Panel({
        title: "Actions",
        width:600,
        height:300,
        bodyStyle: "padding:10px;",     // lazy inline style
        tbar: [
            action, {                   // <-- Add the action directly to a toolbar
                text: "Action Menu",
                menu: [action]          // <-- Add the action directly to a menu
            }
        ],
        items: [
           new Ext.Button(action)       // <-- Add the action as a button
        ],
        renderTo: Ext.getBody()
    });
    var tb = panel.getTopToolbar();
    // Buttons added to the toolbar of the Panel above
    // to test/demo doing group operations with an action
    tb.add("->", {
        text: "Disable",
        handler: function(){
            action.setDisabled(!action.isDisabled());
            this.setText(action.isDisabled() ? "Enable" : "Disable");
        }
    }, {
        text: "Change Text",
        handler: function(){
            Ext.Msg.prompt("Enter Text", "Enter new text for Action 1:", function(btn, text){
                if(btn == "ok" && text){
                    action.setText(text);
                    action.setHandler(function(){
                        Ext.example.msg("Click","You clicked on ""+text+"".");
                    });
                }
            });
        }
    }, {
        text: "Change Icon",
        handler: function(){
            action.setIconClass(action.getIconClass() == "blist" ? "bmenu" : "blist");
        }
    });
    tb.doLayout();
});
</script>
        
</script>
</body>
</html>



Create Ext.Action

  
<!--
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.ru
 * http://www.extjs.ru/license
 */
-->
<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>
<!-- Revised from demo code in ext3.0.0 -->
<body>
<script type="text/javascript">
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.ru
 * http://www.extjs.ru/license
 */
Ext.onReady(function(){
    // The action
    var action = new Ext.Action({
        text: "Action 1",
        handler: function(){
            Ext.example.msg("Click","You clicked on "Action 1".");
        },
        iconCls: "blist"
    });

    var panel = new Ext.Panel({
        title: "Actions",
        width:600,
        height:300,
        bodyStyle: "padding:10px;",     // lazy inline style
        tbar: [
            action, {                   // <-- Add the action directly to a toolbar
                text: "Action Menu",
                menu: [action]          // <-- Add the action directly to a menu
            }
        ],
        items: [
           new Ext.Button(action)       // <-- Add the action as a button
        ],
        renderTo: Ext.getBody()
    });
    var tb = panel.getTopToolbar();
    // Buttons added to the toolbar of the Panel above
    // to test/demo doing group operations with an action
    tb.add("->", {
        text: "Disable",
        handler: function(){
            action.setDisabled(!action.isDisabled());
            this.setText(action.isDisabled() ? "Enable" : "Disable");
        }
    }, {
        text: "Change Text",
        handler: function(){
            Ext.Msg.prompt("Enter Text", "Enter new text for Action 1:", function(btn, text){
                if(btn == "ok" && text){
                    action.setText(text);
                    action.setHandler(function(){
                        Ext.example.msg("Click","You clicked on ""+text+"".");
                    });
                }
            });
        }
    }, {
        text: "Change Icon",
        handler: function(){
            action.setIconClass(action.getIconClass() == "blist" ? "bmenu" : "blist");
        }
    });
    tb.doLayout();
});
</script>
        
</script>
</body>
</html>



Disable action to disable a button

  
<!--
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.ru
 * http://www.extjs.ru/license
 */
-->
<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>
<!-- Revised from demo code in ext3.0.0 -->
<body>
<script type="text/javascript">
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.ru
 * http://www.extjs.ru/license
 */
Ext.onReady(function(){
    // The action
    var action = new Ext.Action({
        text: "Action 1",
        handler: function(){
            Ext.example.msg("Click","You clicked on "Action 1".");
        },
        iconCls: "blist"
    });

    var panel = new Ext.Panel({
        title: "Actions",
        width:600,
        height:300,
        bodyStyle: "padding:10px;",     // lazy inline style
        tbar: [
            action, {                   // <-- Add the action directly to a toolbar
                text: "Action Menu",
                menu: [action]          // <-- Add the action directly to a menu
            }
        ],
        items: [
           new Ext.Button(action)       // <-- Add the action as a button
        ],
        renderTo: Ext.getBody()
    });
    var tb = panel.getTopToolbar();
    // Buttons added to the toolbar of the Panel above
    // to test/demo doing group operations with an action
    tb.add("->", {
        text: "Disable",
        handler: function(){
            action.setDisabled(!action.isDisabled());
            this.setText(action.isDisabled() ? "Enable" : "Disable");
        }
    }, {
        text: "Change Text",
        handler: function(){
            Ext.Msg.prompt("Enter Text", "Enter new text for Action 1:", function(btn, text){
                if(btn == "ok" && text){
                    action.setText(text);
                    action.setHandler(function(){
                        Ext.example.msg("Click","You clicked on ""+text+"".");
                    });
                }
            });
        }
    }, {
        text: "Change Icon",
        handler: function(){
            action.setIconClass(action.getIconClass() == "blist" ? "bmenu" : "blist");
        }
    });
    tb.doLayout();
});
</script>
        
</script>
</body>
</html>



Update action icon

  
<!--
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.ru
 * http://www.extjs.ru/license
 */
-->
<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>
<!-- Revised from demo code in ext3.0.0 -->
<body>
<script type="text/javascript">
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.ru
 * http://www.extjs.ru/license
 */
Ext.onReady(function(){
    // The action
    var action = new Ext.Action({
        text: "Action 1",
        handler: function(){
            Ext.example.msg("Click","You clicked on "Action 1".");
        },
        iconCls: "blist"
    });

    var panel = new Ext.Panel({
        title: "Actions",
        width:600,
        height:300,
        bodyStyle: "padding:10px;",     // lazy inline style
        tbar: [
            action, {                   // <-- Add the action directly to a toolbar
                text: "Action Menu",
                menu: [action]          // <-- Add the action directly to a menu
            }
        ],
        items: [
           new Ext.Button(action)       // <-- Add the action as a button
        ],
        renderTo: Ext.getBody()
    });
    var tb = panel.getTopToolbar();
    // Buttons added to the toolbar of the Panel above
    // to test/demo doing group operations with an action
    tb.add("->", {
        text: "Disable",
        handler: function(){
            action.setDisabled(!action.isDisabled());
            this.setText(action.isDisabled() ? "Enable" : "Disable");
        }
    }, {
        text: "Change Text",
        handler: function(){
            Ext.Msg.prompt("Enter Text", "Enter new text for Action 1:", function(btn, text){
                if(btn == "ok" && text){
                    action.setText(text);
                    action.setHandler(function(){
                        Ext.example.msg("Click","You clicked on ""+text+"".");
                    });
                }
            });
        }
    }, {
        text: "Change Icon",
        handler: function(){
            action.setIconClass(action.getIconClass() == "blist" ? "bmenu" : "blist");
        }
    });
    tb.doLayout();
});
</script>
        
</script>
</body>
</html>



Use action to construct UI controls

  
<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 genericHandler = function(menuItem) {
        Ext.MessageBox.alert("", "Your choice is " + menuItem.text);
    }
    
    var pasteAction = new Ext.Action({
        text    : "Paste",
        iconCls : "paste",
        handler : genericHandler
    });
    
    var editMenuBtn = {
        text : "Edit",
        menu : [
            pasteAction
        ]
    }
    
    new Ext.Window({
        width        : 300,
        height       : 200,
        tbar         : [
            editMenuBtn,
            "->",
            pasteAction
        ]
    }).show();
});

</script>
<body>

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