[Ext JS]图片显示方式| 成都西华升腾科技有限公司

Ext JS开发大全

CmsWing

[Ext JS]图片显示方式

## [Ext JS]图片显示方式
### Ext JS 应用的图片应用场景以及图片显示实现方式
在Ext JS应用中， 图标一般使用图标字体实现，比如使用 Font Awesome 或是Pictos ， 使用方式是配置iconCls属性，类似：
iconCls: 'x-fa fa-home'
图标字体用于显示小的Icon , 但是某些场景下：
或者找不到合适的图标
或者要显示一个很大的图片
在上面的场景中， 就需要导入图片进行显示了。 而在Ext JS应用中， 要实现图片的显示，可以使用的方式有以下四种：
最原生的方式： 使用HTML的img 标签
使用Ext JS的Container 类型组件，设置的html 中使用HTML的img 标签
使用Ext JS的image 组件
在Ext JS 样式中设置背景图
### Ext JS 主应用和子模块 ？
Ext JS 的应用可以通过sencha generate app 命令创建，在较复杂的应用中，也可以通过sencha generate package 命令创建子模块（包）。
包含package 的项目目录结构如下：
myapp
app
classic
modern
resources
images 主应用的图片位置
packages
local
my-package
resources
images 子模块的图片位置
主应用和子模块都可以存放图片，相对位置都是 resources\images 。一般而言， 主应用以及各子模板都需要使用的图片放置在主应用的图片目录， 各子模块使用的图片则各自存放。
### 图片处理场景
综合是否是子模块 和实现方式，展开处理的场景有：

|  主应用  |子模块   |
| ------------ | ------------ |
|  使用HTML的img 标签 |  1.1 主应用直接使用HTML 的image标签  |
|  使用Ext JS的Container 类型组件 |  1.2 主应用使用Container 类型组件设置image标签  |
| 使用Ext JS的image 组件  |  1.3. 主应用使用使用 Ext JS的image 组件  |
|  在Ext JS 样式中设置背景图 |  1.4. 主应用样式中使用图片做背景  |

而主应用和子模块的视图和图片之间的调用也可以交互的， 展开来的场景有：
主应用使用 主应用目录图片
主应用使用子模板目录图片
子模板使用主应用目录图片
子模板使用子模板目录图片
子模块使用主应用的图片类同主应用自身图片处理。
### 1. 主应用处理
#### 1.1 主应用直接使用HTML 的image标签
在多开发模式下（classic ,modern），这里以经典模式为例， 图片放置在项目根目录的 resources/images 的目录中， 在视图设置 html 需要使用图片可以如下定义：

为什么是回退两层目录 ../../ ？ 因为编译为生产环境之后的目录结构如下：
myapp
classic
app.js
resources
images
生产环境的编译， 会把代码集中到app.js中， 所以以这个文件触发， 回退一层到classic目录， 再回退一层到项目的根目录，从根目录出发，到resources/images 就可以找到图片了。
#### 1.2 主应用使用Container 类型组件设置image标签
该方式和上面方式基本类似， 路径的设置也是一样的， 如下代码所示
```json
{	
xtype:'container',		
html:''	
}
```

#### 1.3. 主应用使用Ext JS的image 组件
图片路径设置也是一样， 如下代码：
```javascript
Ext.create('Ext.Img', {   
src: '../../resources/images/myimage.gif',
});
```

#### 1.4 主应用样式中使用图片做背景
在样式设置的方式中， 图片路径和上面不一样， 使用resources 下的相对路径就可以了。 原因是在编译时这个路径会自动的处理， 类似：
```css
.my-class {
	background-image: url('images/my.png');
}
```

### 2. 子模块图片资源的处理
存放在子模块目录下的图片， 使用Sencha Cmd 编译之后， 在开发环境和生产环境的路径会不一样， 以开发环境为例， 产生的图片的路径类似：
build/development/MyApp/classic/resources/my-package/images/my-image.png
这种路径包括了项目名称、开发模式、模块名， 这就很难通过路径的前进后退来定位了。而且，开发、生产环境不一致， 定位的路径可能开发环境好的， 到生产环境就不行了。
Ext JS的Ext类里面提供了一个resolveResource方法， 可以帮助定位包的资源文件的位置， 类似：
```javascript
Ext.resolveResource('<@my-package>images/my-image.png')
```

这个在开发环境的地址就是： build/development/MyApp/classic/resources/my-package/images/my-image.png
#### 2.1 子模块使用HTML 的image标签
结合Ext.resolveResource ， 获取子模块图片的地址：
images/my-image.png')>

#### 2.2 子模块使用Container 类型组件设置image标签
类似上面处理：
```json
{		
xtype:'container',	
html:''
}	
```

#### 2.3 子模块主应用使用Ext JS的image 组件
image 组件可以直接使用<@mypackage-name> 来指定
  ```json
 {      
   xtype:'image',     
   src:'<@mypackage-name>images/my-image.png' 
   }
```

#### 2.4 子模块样式中使用图片做背景
子模块样式里面使用子模块的图片可以直接写为：
```css
.my-class {	
background-image: url('images/my.png');
}
```

购物车

0 ITEMS ON YOUR CART

Ext JS开发大全

[Ext JS]图片显示方式

网站导航