sencha自定義ImageField用於表單中顯示圖片

苦於sencha源碼中，

xtype            Class
---------------------------------------
textfield        Ext.field.Text
numberfield      Ext.field.Number
textareafield    Ext.field.TextArea
hiddenfield      Ext.field.Hidden
radiofield       Ext.field.Radio
filefield        Ext.field.File
checkboxfield    Ext.field.Checkbox
selectfield      Ext.field.Select
togglefield      Ext.field.Toggle
fieldset         Ext.form.FieldSet

並沒有imagefield，顯示圖片起來非常麻煩，於是查看源碼自定義了一個ImageField

secnha-touch-defineBySelf,js該文件在secha原庫和程序入口之間加載即可

<script src="js/sencha-touch-all-2.3.0.js"></script>
<script src="js/sencha-touch-defineBySelf.js"></script>
<script src="app.js"></script>

secnha-touch-defineBySelf,js內容如下：

/** 
 * @Class Ext.Img.ImageField
 * @createTime 2014-04-03
 * 用於表單中的ImageField，通過setValue()來設置圖片路徑顯示圖片，通過getValue()來獲得圖片的路徑
 * 	form.getValues()時也會在values中存入圖片的相應路徑字段
 * 		用法：
 * 			具有一般的Panel的所有屬性，並且還多一個一個value屬性可以設置圖片的路徑
 */
Ext.define('Ext.field.ImageField', {
	extend : 'Ext.Panel',
	xtype : ['imagefield', 'imgfield'],
	
    isField: true,
    isFormField: true,
	
	config : {
		name : null,
		value : null,
		items: [
        {
			xtype : 'img',
			id : 'self-img_photo',
			width : '100%',
			height : '100%',
			margin : '0 0 0 0',
			style : '{background-repeat:no-repeat; background-size:100% auto; background-position:center;}',
		},
		],
	},
	
	setValue : function(path) {
		Ext.getCmp('self-img_photo').setSrc(path);
	},
	
	getValue : function() {
		return Ext.getCmp('self-img_photo').getSrc();
	},
	
});

版權所有，轉載請註明出處！http://blog.csdn.net/kuailebeihun_/article/details/22900591