[Ext JS]实现带动态数字的图标| 成都西华升腾科技有限公司

Ext JS开发大全

CmsWing

[Ext JS]实现带动态数字的图标

## 实现带动态数字的图标
### 组件效果
![](/upload/picture/2022-10-10/upload_ecde764c45a20ff9a7448140afa7238e.png)
根据选择的复选框的数量动态设置购物车中的数字。
在线演示：
https://osxm.github.io/extjs_dev_ency/#iconwithdigit
### 实现思路
在按钮图标上增加一个图形的容器， 图形容器包含一个Text类型的sprite。
```javascript
Ext.create('Ext.draw.Container', {    
	renderTo: shoppingCartBtn.getEl(),      
	width: 20,                
	height: 20,                   
	floating: true,                  
	bodyStyle: {                    
	background: 'transparent'  //背景透明  
	},               
	sprites: [{            
	type: 'text',           
	text: '1',                
	fontSize: 16,             
	x: 8,  // 横坐标     
	y: 12, //纵坐标      
	fillStyle: '#FF0000'  // 字体延伸     
	}]             
});
```

### 注意：
需要设置图形的容器背景为透明 background: 'transparent'
在sprites 使用x, y 设置数字的位置
以上出现的效果如下：
![](/upload/picture/2022-10-10/upload_18cb945b92077d33177757aeacf3333d.png)
有一个问题，有个阴影部分。
### 解决阴影
从上图可以看出， 阴影是有一个div 的box-shadow产生的。
解决方法是给该按钮一个Cls, 通过类选择器设置box-shadow, 类似：
```css
.xm-btn-withchart .x-css-shadow{    box-shadow: none!important;}
```

购物车

0 ITEMS ON YOUR CART

Ext JS开发大全

[Ext JS]实现带动态数字的图标

网站导航