当前位置: 代码迷 >> Web前端 >> 运用图片创建简单的button
  详细解决方案

运用图片创建简单的button

热度:91   发布时间:2012-11-04 10:42:42.0
使用图片创建简单的button
代码:
//具体样式的更改可以修改 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});
                }
            }
        }
        ]
    })



截图:



FIRBUG 查看生成的代码:


  相关解决方案