extjs4.1后台管理图标修改。

基本思路在再官方例子中来。

/**
 * @class Ext.org.ImageView
 * @extends Ext.view.View
 * @xtype imageview
 *
 * This class implements the "My Images" view (the images in the organizer). This class
 * incorporates {@link Ext.ux.DataView.Draggable Draggable} to enable dragging items as
 * well as {@link Ext.ux.DataView.DragSelector DragSelector} to allow multiple selection
 * by simply clicking and dragging the mouse.
 */
Ext.define('Sharera.system.util.ImageOragnizer', {
    extend: 'Ext.view.View',
    alias : 'widget.imageview',
    src:'',
    requires: ['Ext.data.Store'],
    mixins: {
        dragSelector: 'Ext.ux.DataView.DragSelector',
        draggable   : 'Ext.ux.DataView.Draggable'
    },
    
    itemSelector: 'div.thumb-wrap',
    emptyText: '没有图片',
    multiSelect: false,
    singleSelect: true,
    cls: 'x-image-view',
    autoScroll: true,
    
    initComponent: function() {
    	var self = this;
    	this.tpl=[
	        '<tpl for=".">',
	            '<div class="thumb-wrap">',
	                '<div class="thumb">',
	                   /*'<img src="../js/extjs/icons/img/{thumb}" />',*/
	                     '<img src='+self.src+'/{thumb} />',
	                '</div>',
	               /* '<span>{name}</span>',*/
	            '</div>',
	        '</tpl>'
	    ],
        this.store = Ext.create('Ext.data.Store', {
            autoLoad: true,
            fields: ['name', 'thumb', {name: 'leaf', defaultValue: true}],
            proxy: {
                type: 'ajax',
                url : context+'admin/system/icons.json',
                reader: {
                    type: 'json',
                    root: ''
                }
            }
        });
        
        this.mixins.dragSelector.init(this);
        this.mixins.draggable.init(this, {
            ddConfig: {
                ddGroup: 'organizerDD'
            },
            ghostTpl: [
                '<tpl for=".">',
                    '<img src="'+self.src+'/{thumb}" />',
                    '<tpl if="xindex % 4 == 0"><br /></tpl>',
                '</tpl>',
                '<div class="count">',
                    '{[values.length]} images selected',
                '<div>'
            ]
        });
        
        this.callParent();
    }
});

				text : 'image',
				iconCls : 'x-tbar-loading',
				scope : this,
				handler : function(){		
				       var win = Ext.create("Ext.window.Window",{
							title: '双击选择图片',
						    height: 200,
						    width: 400,
						    layout: 'fit',
						    items: [{
						         xtype: 'panel',
						         frame:true,
						         layout:'fit',
						         items: {
				                    xtype: 'imageview',
				                    src:'../js/extjs/icons/img',
				                    listeners: {
				                    	itemdblclick: function (view,record, item,index, e,eOpts) {
				                    	      console.debug(record);
				                    	}
				                    },
				                    trackOver: true
				                }
							}]
					    })
					   win.show();}
			

[
    {
        name: '添加用户',
        thumb: 'user_add.png',
        url: 'kitchensink',
        type: 'Application'
    },
    {
        name: '删除用户',
        thumb: 'delete.png',
        url: 'twitter',
        type: 'Application'
    },
     {
        name: '添加用户',
        thumb: 'user_add.png',
        url: 'kitchensink',
        type: 'Application'
    },
    {
        name: '删除用户',
        thumb: 'delete.png',
        url: 'twitter',
        type: 'Application'
    },
     {
        name: '添加用户',
        thumb: 'user_add.png',
        url: 'kitchensink',
        type: 'Application'
    },
    {
        name: '删除用户',
        thumb: 'delete.png',
        url: 'twitter',
        type: 'Application'
    },
     {
        name: '添加用户',
        thumb: 'user_add.png',
        url: 'kitchensink',
        type: 'Application'
    },
    {
        name: '删除用户',
        thumb: 'delete.png',
        url: 'twitter',
        type: 'Application'
    },
    {
        name: '删除用户',
        thumb: 'delete.png',
        url: 'twitter',
        type: 'Application'
    },
    {
        name: '删除用户',
        thumb: 'delete.png',
        url: 'twitter',
        type: 'Application'
    },
    {
        name: '删除用户',
        thumb: 'delete.png',
        url: 'twitter',
        type: 'Application'
    },
    {
        name: '删除用户',
        thumb: 'delete.png',
        url: 'twitter',
        type: 'Application'
    },
    {
        name: '删除用户',
        thumb: 'delete.png',
        url: 'twitter',
        type: 'Application'
    },
    {
        name: '删除用户',
        thumb: 'delete.png',
        url: 'twitter',
        type: 'Application'
    },
    {
        name: '删除用户',
        thumb: 'delete.png',
        url: 'twitter',
        type: 'Application'
    },
    {
        name: '删除用户',
        thumb: 'delete.png',
        url: 'twitter',
        type: 'Application'
    },
    {
        name: '删除用户',
        thumb: 'delete.png',
        url: 'twitter',
        type: 'Application'
    },
    {
        name: '删除用户',
        thumb: 'delete.png',
        url: 'twitter',
        type: 'Application'
    },
    {
        name: '删除用户',
        thumb: 'delete.png',
        url: 'twitter',
        type: 'Application'
    },
    {
        name: '删除用户',
        thumb: 'delete.png',
        url: 'twitter',
        type: 'Application'
    },
    {
        name: '删除用户',
        thumb: 'delete.png',
        url: 'twitter',
        type: 'Application'
    },
    {
        name: '删除用户',
        thumb: 'delete.png',
        url: 'twitter',
        type: 'Application'
    }
]

/*Sharera.system.util.ImageOragnizer的样式*/
.x-image-view{
    font: 11px Arial, Helvetica, sans-serif;
}
.x-image-view .thumb{
    padding:3px;
}

.x-image-view .thumb-wrap{
    float: left;
    margin: 4px;
    margin-right: 0;
    padding: 5px;
}
.x-image-view .thumb-wrap span{
    display: block;
    overflow: hidden;
    text-align: center;
    width: 76px; /* for ie to ensure that the text is centered */
}
.x-image-view .x-item-selected .thumb {
    background:#8db2e3;
}
.x-image-view .loading-indicator {
    font-size:8pt;
    background-repeat: no-repeat;
    background-position: left;
    padding-left:20px;
    margin:10px;
}

效果丑了点，不过也是可以实现功能