先看一下表单效果：
点击图标，显示图标列表：
实现代码：
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);