Reproduced EXTJS4 notes (5) Ext.button button

Li Hope (lipan)
Source: [Lipan] (http://www.cnblogs.com/lipan/)
Copyright notice: The copyright of this article is owned by the author and the blog Park. Reprint must indicate the detailed link of this article, otherwise the author will retain to pursue its legal responsibility.

Starting with the basic control, ExtJS has its own set of packages for all UI controls. This article is about the ExtJS button. Mainly includes button events, with split lines, with icons, buttons with menus, drop-down Options buttons and button combinations, and so on. Let's look first:

Preview

The following is the HTML used:

[HTML]

    
First, the basic button, three ways to implement button events
Here is the most basic button generation code, the first button has to bounce and press the two states, three buttons are set to three different sizes. The Click events for each button are implemented in a new way. Here's a look at the JS code:
[Js]
    Ext.create ("Ext.button", {        renderTo:Ext.get ("Li1"),        Text: "Event Implementation 1",        allowdepress:true,     // Whether to allow the button to be pressed state        enabletoggle:true,     //whether the button is allowed to toggle        handler:function () {            Ext.Msg.alert ("Prompt", " First event ");        },        ID:" BT1 "    });    Ext.create ("Ext.button", {        renderTo:Ext.get ("Li2"),        Text: "Event implementation 2",        listeners: {"click": Function () {            Ext.Msg.alert ("Hint", "second event")        ,},        ID: "BT2", scale        : ' Medium '    });    var bt3 = ext.create ("Ext.button", {        renderTo:Ext.get ("Li3"). Dom,        text: "Event implementation 3",        ID: "BT3",        Scale: ' Large '    });    Bt3.on ("click", Function () {        Ext.Msg.alert ("Hint", "third event");    });
Second, with icon menu
Buttons can be equipped with icons and menus, which we can configure in configuration items:
[Js]
    Ext.create ("Ext.button", {renderTo:Ext.get ("Div2"), ID: "Bt4", Text: "With menu with Icon", Iconcls:                    "Add16", Menu: {items: [{text: ' option 1 '}, {                        Text: ' Option 2 '}, {text: ' option 3 ', Handler:function () {                    Ext.Msg.alert ("Hint", "Message from menu");    }}]}). ShowMenu (); Ext.create ("Ext.button", {renderTo:Ext.get ("Div2"), ID: "Bt5", Text: "Subscript menu", Iconcls: "Add16                ", Iconalign: ' Top ', menu: {items: [{text: ' option 1 ' }, {text: ' option 2 '}, {text: ' option 3 ', hand                    Ler:function () {Ext.Msg.alert ("hint", "Message from menu");        }                }            ]}, Arrowalign: ' Bottom '}); 
Three, the button with split line
Note: The Split line button comes from the class Ext.splitbutton
[Js]
    Ext.create ("Ext.button.Split", {        renderTo:Ext.get ("Div3"),        Text: "Right icon down menu",        iconcls: "Add16",        Iconalign: ' Right ',        menu:        {            items: [                {                    text: ' Option 1 '                }, {                    text: ' Option 2 '                }, {                    Text: ' option 3 ',                    handler:function () {                        Ext.Msg.alert ("Hint", "Message from Menu"),}                }            ]        },        Arrowalign: ' Bottom '    });
Four, menu-style button
Button Menu Ext.cyclebutton Unlike a drop-down, it is checked and the selected text changes accordingly when the drop-down item is selected.
[Js]
    Ext.create (' Ext.button.Cycle ', {        renderTo:Ext.get ("Div4"),        showtext:true,        prependtext: ' Please select: ',        Menu:        {            items: [{                text: ' option 1 ',                checked:true            }, {                text: ' Option 2 '            }, {                text: ' Option 3 '            }]        },        changehandler:function (BTN, item) {            Ext.Msg.alert (' Modify Selection ', Item.text);        }    );
Four, button combination
Defines a set of buttons and can control the layout of the buttons.
[Js]
 Ext.create ("Ext.buttongroup", {renderTo:Ext.get ("div5"), TITL E: "button combination", Columns:3,//defaulttype: ' SplitButton ', items: [{text: ' button 1 ', Icon Cls: ' Add16 ', scale: ' Large ', Rowspan:2}, {text: ' button 2 ', Iconcls: ' Add16 ', rowsp An:2, scale: ' large '}, {text: ' button 3 ', Iconcls: ' Add16 '}, {xtype: ' SplitButton ', TE XT: ' Split line button ', iconcls: ' Add16 ', menu: [{text: ' Menu 1 '}]}});