淺談 sencha 2.0 中image和carousel的圖片自適應大小的應用

        在sencha 2.0中，經常會用到xtype:image, 但是這個類型的使用，它的表現形式都是一個<div>，然後給把我們要顯示的圖片作爲背景圖片放入這個div中，這樣，我們往往不好設置它的大小，因爲圖片是背景圖片，高寬都不如<img>標籤進行控制的好。

        尤其是當我們使用xtype:carousel這個類型時，如果代碼是這樣：

xtype: 'carousel',
items: [{
    xtype: 'image',
    height: '100',
    width: '100',
    src: 'http://192.168.1.1/image.jpg'
},{
    xtype: 'image',
    height: '100',
    width: '100',
    src: 'http://192.168.1.1/image.jpg'
}]

        這樣，即使我們設置了高寬，但是圖片都不會按大小進行縮放，反而是圖片按這個大小進行裁剪，因爲這樣表現出來的是一個div裏面的背景圖片。因此，我們不妨不要直接在carousel的items裏面直接寫image，而是在items裏面先定義一個panel，然後往這個panel裏面填充，用html:"<img src='http://192.168.1.1/image.jpg' style='max-height:200px;max-width:200px'>"：就如代碼：

xtype: 'carousel',
items: [{
    xtype: 'panel',
    html:"<img src='http://192.168.1.1/image.jpg' style='max-height:200px;max-width:200px'>"
},{
    xtype: 'panel',
    html:"<img src='http://192.168.1.1/image.jpg' style='max-height:200px;max-width:200px'>"
}]

這樣把max-height和max-width設置爲carousel的大小，那麼圖片就會自動縮放