Ext3 学习(4) -- Button

Button 的简单的基本用法：

// 定义简单的带图标的按钮    var myButton = Ext.create({        xtype: "button",        renderTo: Ext.getBody(),        text: "Text with Image",  // 按钮上显示的文字        scale: "medium",    // 外观大小(enum) "small": 16px/ "medium": 24px / "large": 32px        tooltip: "This is a tooltip for Button",   // 提示信息：         tooltipType: "title",  // 定义提示信息的类型 (enum) "title" / "qtip" -- default, but do not work!! -- Need to add: Ext.QuickTips.init(); , 显示默认的提示信息        cls: "btnalign",    // 样式， but 'color' do not work        //icon: "images/add24.gif"    // （路径）直接添加按钮上的图片，默认 图左文右 -- 这种方式不太好，还是放在CSS中        iconCls: "btnimg",        iconAlign: "right",   // 图标显示的位置: 'top' / 'right' / 'bottom' / 'left' (default)        //按钮的单击事件： 是有先后顺序的： click > handler!        handler: function (){            alert("Hander: You click this Button!");        },        listeners: {            click: function(){                alert("First to Execute -- Click: You click this Button!");            }        }    });    // 还可以这样添加事件    myButton.on("mouseout", function(){        alert("Mouse out! ");        //禁用按钮        myButton.disable();    });// 按钮组    var btnGroup = Ext.create({        xtype: "buttongroup",        renderTo: Ext.getBody(),        frame: false,   //不显示边框线        style: "margin-top: 10px",        defaults: {            scale: "medium",            width: 110,            style: {                marginLeft: "10px"            }        },        items: [            //普通按钮            {                text: "Plain Text"            },             // 带图片的按钮                       {                text: "Image",                iconCls: "btnimg"            },                        //有分割线及下拉菜单的按钮            {                xtype: "splitbutton",                text: "Splitor",                                menu: [                    {                        text: "Menu one"                    }                ]            },            // 特殊化的菜单按钮(radioItems),             {                xtype: "cycle",                showText: true,                width: 150,                prependText: "Selected: ",  // 附加到选择信息的前面                items: [                    {                        text: "Item one"                    },                    {                        text: "Item Two",                        checked: true                    }                ],                changeHandler: function(thisButton, item){                    alert("You have selected: " + item.text);                }            },        ]    });

效果显示：

参考： 

http://blog.csdn.net/yunxiang/article/details/6752195

http://www.cnblogs.com/lipan/archive/2011/12/13/2274797.html