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