【Sencha Toucha】Sencha Touch ExtJs 给 Button 添加图片

最新推荐文章于 2020-12-27 10:27:16 发布

原创最新推荐文章于 2020-12-27 10:27:16 发布 · 1.4k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

【SENCHA TOUCH】

本文讨论了使用Ruby处理图片时遇到的网络连接问题，通过调整代码配置成功显示图片，并展示了最终实现的效果。

在网上找了很多例子，说ruby加工图片，公司连不上网装不上去，离线研究了半天也没装上。

也有个一样的这样的帖子，发了一个加图片。说是要加BLANK_IMAGE_URL 这个属性，研究了半天。最后弄出来不用加就可以显示。最后效果如下：

ext代码：

Ext.define('app.view.MPktkf', {
	extend : 'Ext.Container',
	xtype : "MPktkf",
	config : {
		fullscreen : true,
		scrollable : true,
		monitorOrientation : true,
		dockedItems : [],
		fullscreen : true,
		layout : 'vbox',
		defaults : {
			padding : 10,
			defaults : {
				margin : 5
			}
		},
		items : [{
			xtype : 'panel',
			html : '<div class="model"><h2 class="sTitle">报表</h2><div id="sSolid"></div></div>'
		}, {
			xtype : 'panel',
			layout : 'hbox',
			items : [{
						xtype : 'button',
						text : '　按鈕1　',
						ui : 'normal',
						iconAlign : 'top',
						iconCls : 'bt_kt',
						iconMask : true,
						handler : function onclick() {
						}
					}, {
						xtype : 'button',
						text : '按鈕2',
						ui : 'normal',
						iconAlign : 'top',
						iconCls : 'bt_ycpj',
						iconMask : true,
						handler : function onclick() {
						}
					}, {
						xtype : 'button', 
						text : '按鈕3',
						ui : 'normal',
						iconAlign : 'top',
						iconCls : 'bt_ytkf',
						iconMask : true,
						handler : function onclick() {
						}
					}, {
						xtype : 'button',
						text : '按鈕4',
						ui : 'normal',
						iconAlign : 'top',
						iconCls : 'bt_qtkf',
						iconMask : true,
						handler : function onclick() {
						}
					}]
		}, {
			.......
});

css代码

.bt_kt
{
	background: url(images/spirit-level.png)  left top no-repeat !important;  
	background-size:100% 100%;
	width: 3.1em !important;
	height: 3.1em !important;
}