EXT 可选择图片列表的表单控件实现

先看一下表单效果：

点击图标，显示图标列表：

实现代码：

         var appform = new Ext.form.FormPanel({
 	        id: 'appform',
 	        cardStep:0,
 	        url:Adc.url.appAction,
 	        padding:'10px 20px',
 	        labelWidth: 80,
 	        baseCls: 'x-plain',
 	        method:'POST',
 	        defaults: {
 	            xtype: 'textfield'
 	        },
 	        items:[{
 	            fieldLabel: '编号',
 	            name : 'appId',
                 hidden:true,
 	            value : appId,
 	            anchor :'100%'
 	        },{
 	            fieldLabel: '名称',
 	            name : 'appName',
 	            allowBlank:false, //不允许为空
 	            blankText:'页面名称不能为空',
 	            emptyText:'请输入应用名称',
 	            maxLength:20,
 	            anchor :'100%'
 	        },
 	        {
 	            fieldLabel: '应用分类',
 	            name : 'catlogId',
 	            //hidden:true,
 	             readOnly : !me.editMode,
                // value :me.catalogId,
 	             xtype:'catalogselectfield',
                 //emptyText:'请选择',
                 //allowBlank:false, //不允许为空
 	            action:Adc.url.getCatlogTreeMethod,
 	            catId:Adc.constant.APP_CATLOG_ID,
 	            anchor :'100%'
 	        },
 	         {
                fieldLabel: '应用图标',
                name : 'appIcon',
                xtype:'appIconSelectField',
                imageFilePath:'resources/appDev/images/appIcon/',
                value:'resources/appDev/images/appIcon/defaultmenu_icon.png',
                anchor :'100%'
             }
 	         ,
 	        {
 	            xtype : 'textarea',
 	            fieldLabel: '描述',
 	            name : 'appDesc',
 	            allowBlank:true,
 	            emptyText:'请输入应用描述信息',
 	            maxLength:200,
 	            flex: 1,
 	            anchor :'100% 30%'
 	        },
 	        {
                 fieldLabel: '模板',
                 name : 'tplId',
                 allowBlank:false, //不允许为空
                 xtype:'templateselectfield',
                 anchor :'100%'
             },
 	        {
 	            fieldLabel: '状态',
 	            name : 'appStatus',
 	            hidden:true,
 	            value:'0',
 	            anchor :'100%'
 	        },{
 	            name : 'action',
 	            hidden:true,
 	            value:Adc.url.createAppMethod,
 	            anchor :'100%'
 	        },{
                 fieldLabel: '应用首页',
                 name : 'idxPageId',
                 value:me.pageId,
                 hidden:true,
                 anchor :'100%'
             }]
 	    });

AppIconSelectField.js

 Ext.ns('Adc.components');
 Adc.components.AppIconSelectField = Ext.extend(Ext.form.TextField,{

	    imageFilePath:'resources/appDev/images/appIcon/',
	    imageFilePreffix:'topmenu_icon',
	    imageFileSuffix:'.png',
	    maxImgCount:120,

	    constructor:function(config){
	        Ext.apply(this,config);
	        this.initImageData();
	        Adc.components.AppIconSelectField.superclass.constructor.call(this,config);
	    },
	    initImageData:function(){
	        var data ={};
	        data.images=[];
	        for(i=1;i<this.maxImgCount;i++){
	            //i=i<10?'0'+i:i;
	            var name = this.imageFilePreffix+i+this.imageFileSuffix;
	            var url = this.imageFilePath + name;
	            var o ={};
	            o.name = name;
	            o.url = url;
	            data.images.push(o);
	        };
	        this.imageData = data;
	    },
	    initComponent: function() {
	        Adc.components.AppIconSelectField.superclass.initComponent.call(this);
	        //添加事件
	        this.addEvents(
	            //当输入框被赋值时触发
	            'datachange'
	        );
	    },
	    onRender : function(ct, position) {
	        Adc.components.AppIconSelectField.superclass.onRender.call(this, ct, position);
	        //将输入表单隐藏
	        try{
	            this.el.dom.setAttribute('type','hidden');
	        }catch(e){
	            this.el.dom.style.display="none";
	        }
	        this.buidImageField();
	    },
	    buidImageField:function(){
	        this.wrap =  this.el.wrap({cls: 'x-form-field-wrap adc-form-field-img-wrap'});
	        var imgEl = this.wrap.createChild({
	            tag: 'img',
	            src: 'resources/appDev/images/appIcon/topmenu_icon01.png',
	            width:45,
                height:45
	        });
	        this.imgEl = imgEl;
	        var trigger = this.wrap.createChild({
	            tag: 'img',
	            src: Ext.BLANK_IMAGE_URL,
	            alt: "",
	            cls: "x-form-trigger adc-form-appIcon-trigger " + this.triggerClass
	        });
	        this.trigger = trigger;

	        this.initTrigger();
	        if(!this.width){
	            this.wrap.setWidth(this.imgEl.getWidth()+this.trigger.getWidth()+5);
	        }
	        this.resizeEl = this.positionEl = this.wrap;
	    },
	    initTrigger:function(){
	        this.mon(this.trigger, 'click', this.onTriggerClick, this, {preventDefault:true});
	    },
	    buildImageView:function(){
	        var me = this;
	        var imgEl = me.imgEl;
	        var data = me.imageData;
		    var store = new Ext.data.JsonStore({
		        data:data,
		        root: 'images',
		        fields: ['name', 'url']
		    });
		    var tpl = new Ext.XTemplate(
		    		'<tpl for=".">',
	                '<div id="{url}" class="x-plain app-icon-view-wrap">',
	                    '<div class="app-icon-body"><img src="{url}" style="width: 45px; height: 45px;" title="{name}"></div>',
	                '</div>',
	                '</tpl>',
	                '<div class="x-clear"></div>'
		    );

		    var imageView = new Ext.DataView({
	            store: store,
	            tpl: tpl,
	            autoHeight:true,
	            singleSelect: true,
	            trackOver:true,
	            overClass:'tpl-model-view-over',
	            itemSelector:'div.app-icon-view-wrap',
	            selectedClass :'tpl-model-view-selected',
	            emptyText: '没有可显示的图片'
	        });
	        var win = new Ext.Window({
	            width:850,
	            height:450,
	            modal: true,
	            title:'请选择',
	            layout:'fit',
	            items:imageView
	        });
	        imageView.on('click',function(view,index,node,e){
	            var rec = store.data.get(index);
	            var url = rec.data.url;
	            me.value = url;
	            me.el.dom.value = url;
	            imgEl.dom.setAttribute('src',url);
	            win.close();
	        });
	        win.show();
	        win.body.setStyle('background-color','#fff');
	    },
	    getValue:function(){
	        return this.value;
	    },
	    setValue : function(v){
	        this.value = v;
	        this.el.dom.value = v;
	        if(this.imgEl){
	            this.imgEl.dom.setAttribute('src',v);
	        }
	        return this;
	    },
	    onTriggerClick:function(trigger){
	        this.buildImageView();
	    }
	});
Ext.reg('appIconSelectField',Adc.components.AppIconSelectField);