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