古风_[Ext JS]圖片顯示方式| 成都西華升騰科技有限公司

Ext JS開(kāi)發(fā)大全

CmsWing

[Ext JS]圖片顯示方式

## [Ext JS]圖片顯示方式
### Ext JS 應用的圖片應用場(chǎng)景以及圖片顯示實(shí)現方式
在Ext JS應用中， 圖標一般使用圖標字體實(shí)現，比如使用 Font Awesome 或是Pictos ， 使用方式是配置iconCls屬性，類(lèi)似：
iconCls: 'x-fa fa-home'
圖標字體用于顯示小的Icon , 但是某些場(chǎng)景下：
或者找不到合適的圖標
或者要顯示一個(gè)很大的圖片
在上面的場(chǎng)景中， 就需要導入圖片進(jìn)行顯示了。 而在Ext JS應用中， 要實(shí)現圖片的顯示，可以使用的方式有以下四種：
最原生的方式： 使用HTML的img 標簽
使用Ext JS的Container 類(lèi)型組件，設置的html 中使用HTML的img 標簽
使用Ext JS的image 組件
在Ext JS 樣式中設置背景圖
### Ext JS 主應用和子模塊 ？
Ext JS 的應用可以通過(guò)sencha generate app 命令創(chuàng  )建，在較復雜的應用中，也可以通過(guò)sencha generate package 命令創(chuàng  )建子模塊（包）。
包含package 的項目目錄結構如下：
myapp
app
classic
modern
resources
images 主應用的圖片位置
packages
local
my-package
resources
images 子模塊的圖片位置
主應用和子模塊都可以存放圖片，相對位置都是 resources\images 。一般而言， 主應用以及各子模板都需要使用的圖片放置在主應用的圖片目錄， 各子模塊使用的圖片則各自存放。
### 圖片處理場(chǎng)景
綜合是否是子模塊 和實(shí)現方式，展開(kāi)處理的場(chǎng)景有：

|  主應用  |子模塊   |
| ------------ | ------------ |
|  使用HTML的img 標簽 |  1.1 主應用直接使用HTML 的image標簽  |
|  使用Ext JS的Container 類(lèi)型組件 |  1.2 主應用使用Container 類(lèi)型組件設置image標簽  |
| 使用Ext JS的image 組件  |  1.3. 主應用使用使用 Ext JS的image 組件  |
|  在Ext JS 樣式中設置背景圖 |  1.4. 主應用樣式中使用圖片做背景  |

而主應用和子模塊的視圖和圖片之間的調用也可以交互的， 展開(kāi)來(lái)的場(chǎng)景有：
主應用使用 主應用目錄圖片
主應用使用子模板目錄圖片
子模板使用主應用目錄圖片
子模板使用子模板目錄圖片
子模塊使用主應用的圖片類(lèi)同主應用自身圖片處理。
### 1. 主應用處理
#### 1.1 主應用直接使用HTML 的image標簽
在多開(kāi)發(fā)模式下（classic ,modern），這里以經(jīng)典模式為例， 圖片放置在項目根目錄的 resources/images 的目錄中， 在視圖設置 html 需要使用圖片可以如下定義：

為什么是回退兩層目錄 ../../ ？ 因為編譯為生產(chǎn)環(huán)境之后的目錄結構如下：
myapp
classic
app.js
resources
images
生產(chǎn)環(huán)境的編譯， 會(huì )把代碼集中到app.js中， 所以以這個(gè)文件觸發(fā)， 回退一層到classic目錄， 再回退一層到項目的根目錄，從根目錄出發(fā)，到resources/images 就可以找到圖片了。
#### 1.2 主應用使用Container 類(lèi)型組件設置image標簽
該方式和上面方式基本類(lèi)似， 路徑的設置也是一樣的， 如下代碼所示
```json
{	
xtype:'container',		
html:''	
}
```

#### 1.3. 主應用使用Ext JS的image 組件
圖片路徑設置也是一樣， 如下代碼：
```javascript
Ext.create('Ext.Img', {   
src: '../../resources/images/myimage.gif',
});
```

#### 1.4 主應用樣式中使用圖片做背景
在樣式設置的方式中， 圖片路徑和上面不一樣， 使用resources 下的相對路徑就可以了。 原因是在編譯時(shí)這個(gè)路徑會(huì )自動(dòng)的處理， 類(lèi)似：
```css
.my-class {
	background-image: url('images/my.png');
}
```

### 2. 子模塊圖片資源的處理
存放在子模塊目錄下的圖片， 使用Sencha Cmd 編譯之后， 在開(kāi)發(fā)環(huán)境和生產(chǎn)環(huán)境的路徑會(huì )不一樣， 以開(kāi)發(fā)環(huán)境為例， 產(chǎn)生的圖片的路徑類(lèi)似：
build/development/MyApp/classic/resources/my-package/images/my-image.png
這種路徑包括了項目名稱(chēng)、開(kāi)發(fā)模式、模塊名， 這就很難通過(guò)路徑的前進(jìn)后退來(lái)定位了。而且，開(kāi)發(fā)、生產(chǎn)環(huán)境不一致， 定位的路徑可能開(kāi)發(fā)環(huán)境好的， 到生產(chǎn)環(huán)境就不行了。
Ext JS的Ext類(lèi)里面提供了一個(gè)resolveResource方法， 可以幫助定位包的資源文件的位置， 類(lèi)似：
```javascript
Ext.resolveResource('<@my-package>images/my-image.png')
```

這個(gè)在開(kāi)發(fā)環(huán)境的地址就是： build/development/MyApp/classic/resources/my-package/images/my-image.png
#### 2.1 子模塊使用HTML 的image標簽
結合Ext.resolveResource ， 獲取子模塊圖片的地址：
images/my-image.png')>

#### 2.2 子模塊使用Container 類(lèi)型組件設置image標簽
類(lèi)似上面處理：
```json
{		
xtype:'container',	
html:''
}	
```

#### 2.3 子模塊主應用使用Ext JS的image 組件
image 組件可以直接使用<@mypackage-name> 來(lái)指定
  ```json
 {      
   xtype:'image',     
   src:'<@mypackage-name>images/my-image.png' 
   }
```

#### 2.4 子模塊樣式中使用圖片做背景
子模塊樣式里面使用子模塊的圖片可以直接寫(xiě)為：
```css
.my-class {	
background-image: url('images/my.png');
}
```

#### 備注
本篇的圖片顯示支持 1841 和 8080 （前后端整合開(kāi)發(fā)）的兩種開(kāi)發(fā)方式。

98国产在线视频福利_欧亚v视频日韩一区二区_国产在线精彩视频_亚洲伊人久久综合影院_亚洲欧美高清激情精品一区_少妇熟女天堂网av_午夜福利日本专区_中美女子成人毛片_大荫蒂毛茸茸视频国产_小14萝裸体自慰洗澡大尺度

購物車(chē)

0 ITEMS ON YOUR CART

Ext JS開(kāi)發(fā)大全

[Ext JS]圖片顯示方式

網(wǎng)站導航