使用图片创建简单的button

最新推荐文章于 2022-02-25 18:19:43 发布

iteye_12132

最新推荐文章于 2022-02-25 18:19:43 发布

阅读量132

点赞数

分类专栏： Ext 文章标签： EXT C C++ C#

Ext 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

代码：


//具体样式的更改可以修改 style元素

    new Ext.FormPanel({
        title: 'default',
        width:300,
        height: 300,
        frame: true,
        border:true,
        renderTo:document.body,
        layout:'form',
        items:[
        {
            xtype : 'box',
			autoEl : {
				tag : 'a',
				href : '#',
				children : [{
							tag : 'img',
							'ext:qtip' : "Export PDF",
							src : 'pdf.jpg'
						}]
			},
			style : 'cursor:pointer;',
			listeners : {
				render : function(c) {
					c.getEl().on('click', function() {
					   alert('click!!');
					}, c, {stopEvent : true});
				}
			}
		},
        {
            xtype : 'box',
            autoEl : {
                tag : 'a',
                href : '#',
                children : [{
                            tag : 'img',
                            'ext:qtip' : "Export Word",
                            src : 'word.jpg'
                        }]
            },
            style : 'cursor:pointer;',
            listeners : {
                render : function(c) {
                    c.getEl().on('click', function() {
                       alert('click!!');
                    }, c, {stopEvent : true});
                }
            }
        }
        ]
    })

截图：

[img]http://dl.iteye.com/upload/attachment/267195/24162599-7565-3eba-b016-511d1e3299c9.bmp[/img]

FIRBUG 查看生成的代码：

[img]http://dl.iteye.com/upload/attachment/267197/98a9f726-ecfc-34d5-b196-ab9562c65ecc.bmp[/img]