下拉框可选择多列图片 博客分类： extjsspringmvcjs东阳工资项目 extjscombobox下拉框图片

前台extjs

Ext.ns('Ext.ux');
Ext.ux.CssShowCombo = Ext.extend(Ext.form.ComboBox ,{
	array			: [],
	selectOnFocus 	: true,
	minListWidth	: 200,
	pageSize		: 50,
	autoScroll		: true,
	lazyInit      	: true,
	typeAhead		: true,
    triggerAction	: 'all',
    lazyRender		: true,
    mode			: 'remote',
    valueField		: 'name',
    displayField	: 'name',
	initComponent 	: function(){
		Ext.ux.CssShowCombo.superclass.initComponent.call(this);
	},
    store: new Ext.data.Store({
    	url 	: contextPath+'/cssShow/getData.do',
    	reader	: new Ext.data.JsonReader({
    		root: 'root',
   	 		totalProperty: 'totalCount',
		    fields: [
		        {name: 'name'},
		        {name: 'url'}
		    ]
		})
    }),
	tpl : new Ext.XTemplate(
			'<table>',
				'<tr>',
					'<tpl for=".">',
						'<td class="x-combo-list-item" height="16px" width="16px">',
							'<img  src="{url}" />',
						'</td>',
					'<tpl if="xindex % 5 === 0">',//if="xindex % 5 === 0"
					'</tr>',
					'<tr>',
					'</tpl>',
					'</tpl>',
				'</tr>',
			'</table>'
	),
	/*onRender:function(ct,position) {
		// call parent onRender
        Ext.ux.CssShowCombo.superclass.onRender.call(this, ct, position);
 
		// adjust styles
        this.wrap.applyStyles({position:'relative'});
        this.el.addClass('ux-icon-combo-input');
 
        // add div for icon
        this.icon = Ext.DomHelper.append(this.el.up('div.x-form-field-wrap'), {
            tag: 'img', style:'position:absolute;height:16px;width:16px;left:0px;'
        });
    },
 
    setIconCls: function(value) {
      var rec = this.store.query(this.valueField, this.getValue()).itemAt(0);
        if(rec) {
			this.icon.src = rec.get('url');
        }
    },
 
    setValue: function(value) {
        Ext.ux.CssShowCombo.superclass.setValue.call(this, value);
        this.setIconCls(value);
    },*/
	listeners : {
    	'beforerender' : function(thisCmp){
    		if(this.array.length<=0){
				//若要引入其他css,在数组urls配置对应url即可
	    		var urls=[
					'/resources/css/silk.css'
				];
				var content = '';
				var i = 1;
	    		var silkSuccFn = function(response,opts){
					var text = response.responseText;
					content += text;
					if(i<urls.length){
						/*Gov.Ajax.request({
							url:contextPath+urls[i],
							mskCfg:{el:this.el},
							success:silkSuccFn,
							scope:this
						});*/
						Ext.Ajax.request({
							url:contextPath+urls[i],
							success:silkSuccFn,
							scope:this
						});
					}else if(i==urls.length){
						/*Gov.Ajax.request({
					    	url	: contextPath+'/cssShow/dealCssContent.do',
							mskCfg 	: {el:this.el},
							params	: {'content':content},
							success	: function(response,opts){
								var ary = response.responseText;
								var obj = Ext.decode(ary);
								var lines = obj.lines;
								for(var i=0;i < lines.length;i++){
									this.array.push(lines[i]);
								}
					    		var param = {"array" : this.array};
					    		thisCmp.getStore().baseParams = param;
							},
							scope	: this
				    	});*/
					Ext.Ajax.request({//兼容性问题,使用Gov.Ajax.request 无法在ie中发送请求
						url	: contextPath+'/cssShow/dealCssContent.do',
						params	: {'content':content},
						success	: function(response,opts){
								var ary = response.responseText;
								var obj = Ext.decode(ary);
								var lines = obj.lines;
								for(var i=0;i < lines.length;i++){
									this.array.push(lines[i]);
								}
					    		var param = {"array" : this.array};
					    		thisCmp.getStore().baseParams = param;
							},
							scope	: this
						});
					}
					i++;
				}
	    		Gov.Ajax.request({
	    			url		: contextPath+urls[0],
	    			mskCfg 	: {el:this.el},
	    			success	: silkSuccFn,
	    			scope	: this
	    		});				
			}
    	},
    	'expand' : function(thisCmp){//水平滚动条
    		this.innerList.dom.style.overflowX="auto";
    	}
    	
    }
});
Ext.reg('cssshowcombo',Ext.ux.CssShowCombo);

看不懂可call me