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

来源：互联网发布：淘宝新规处罚规定编辑：程序博客网时间：2024/05/16 17:41

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

/** * @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;}

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

0 0