zoukankan      html  css  js  c++  java
  • Extjs4 desktop 图标自动换行,横纵排列 图标大小修改

    一、图标换行

    /*!
     * Ext JS Library 4.0
     * Copyright(c) 2006-2011 Sencha Inc.
     * licensing@sencha.com
     * http://www.sencha.com/license
     */
    
    /**
     * @class Ext.ux.desktop.Desktop
     * @extends Ext.panel.Panel
     * <p>This class manages the wallpaper, shortcuts and taskbar.</p>
     */
    Ext.define('Ext.ux.desktop.Desktop', {
        extend: 'Ext.panel.Panel',
    
        alias: 'widget.desktop',
    
        uses: [
            'Ext.util.MixedCollection',
            'Ext.menu.Menu',
            'Ext.view.View', // dataview
            'Ext.window.Window',
    
            'Ext.ux.desktop.TaskBar',
            'Ext.ux.desktop.Wallpaper'
        ],
    
        activeWindowCls: 'ux-desktop-active-win',
        inactiveWindowCls: 'ux-desktop-inactive-win',
        lastActiveWindow: null,
    
        border: false,
        html: '&#160;',
        layout: 'fit',
    
        xTickSize: 1,
        yTickSize: 1,
    
        app: null,
    
        /**
         * @cfg {Array|Store} shortcuts
         * The items to add to the DataView. This can be a {@link Ext.data.Store Store} or a
         * simple array. Items should minimally provide the fields in the
         * {@link Ext.ux.desktop.ShorcutModel ShortcutModel}.
         */
        shortcuts: null,
    
        /**
         * @cfg {String} shortcutItemSelector
         * This property is passed to the DataView for the desktop to select shortcut items.
         * If the {@link #shortcutTpl} is modified, this will probably need to be modified as
         * well.
         */
        shortcutItemSelector: 'div.ux-desktop-shortcut',
    
        /**
         * @cfg {String} shortcutTpl
         * This XTemplate is used to render items in the DataView. If this is changed, the
         * {@link shortcutItemSelect} will probably also need to changed.
         */
        shortcutTpl: [
            '<tpl for=".">',
                '<div class="ux-desktop-shortcut" id="{name}-shortcut">',
                    '<div class="ux-desktop-shortcut-icon {iconCls}">',
                        '<img src="',Ext.BLANK_IMAGE_URL,'" title="{name}">',
                    '</div>',
                    '<span class="ux-desktop-shortcut-text">{name}</span>',
                '</div>',
            '</tpl>',
            '<div class="x-clear"></div>'
        ],
    
        /**
         * @cfg {Object} taskbarConfig
         * The config object for the TaskBar.
         */
        taskbarConfig: null,
    
        windowMenu: null,
    
        initComponent: function () {
            var me = this;
            me.windowMenu = new Ext.menu.Menu(me.createWindowMenu());
    
            me.bbar = me.taskbar = new Ext.ux.desktop.TaskBar(me.taskbarConfig);
            me.taskbar.windowMenu = me.windowMenu;
    
            me.windows = new Ext.util.MixedCollection();
    
            me.contextMenu = new Ext.menu.Menu(me.createDesktopMenu());
    
            me.items = [
                { xtype: 'wallpaper', id: me.id+'_wallpaper' },
                me.createDataView()
            ];
    
            me.callParent();
    
            me.shortcutsView = me.items.getAt(1);
            me.shortcutsView.on('itemclick', me.onShortcutItemClick, me);
            
            
            var wallpaper = me.wallpaper;
            me.wallpaper = me.items.getAt(0);
            if (wallpaper) {
                me.setWallpaper(wallpaper, me.wallpaperStretch);
            }
        },
    
        afterRender: function () {
            var me = this;
            me.callParent();
            me.el.on('contextmenu', me.onDesktopMenu, me);
            // 实现桌面图标自动换行  
            Ext.Function.defer(me.initShortcut, 1); 
        },
    
        //------------------------------------------------------
        // Overrideable configuration creation methods
    
        createDataView: function () {
            var me = this;
            return {
                xtype: 'dataview',
                overItemCls: 'x-view-over',
                trackOver: true,
                itemSelector: me.shortcutItemSelector,
                store: me.shortcuts,
                style: {
                    position: 'absolute'
                },
                x: 0, y: 0,
                // 实现桌面图标自动换行  
                listeners:{    
                    resize:me.initShortcut    
                }, 
                tpl: new Ext.XTemplate(me.shortcutTpl)
            };
        },
    
        createDesktopMenu: function () {
            var me = this, ret = {
                items: me.contextMenuItems || []
            };
    
            if (ret.items.length) {
                ret.items.push('-');
            }
    
            ret.items.push(
                    { text: '展开', handler: me.tileWindows, scope: me, minWindows: 1 },
                    { text: '层叠', handler: me.cascadeWindows, scope: me, minWindows: 1 })
    
            return ret;
        },
    
        createWindowMenu: function () {
            var me = this;
            return {
                defaultAlign: 'br-tr',
                items: [
                    { text: '恢复', handler: me.onWindowMenuRestore, scope: me },
                    { text: '最小化', handler: me.onWindowMenuMinimize, scope: me },
                    { text: '最大化', handler: me.onWindowMenuMaximize, scope: me },
                    '-',
                    { text: '关闭', handler: me.onWindowMenuClose, scope: me }
                ],
                listeners: {
                    beforeshow: me.onWindowMenuBeforeShow,
                    hide: me.onWindowMenuHide,
                    scope: me
                }
            };
        },
    
        //------------------------------------------------------
        // Event handler methods
    
        onDesktopMenu: function (e) {
            var me = this, menu = me.contextMenu;
            e.stopEvent();
            if (!menu.rendered) {
                menu.on('beforeshow', me.onDesktopMenuBeforeShow, me);
            }
            menu.showAt(e.getXY());
            menu.doConstrain();
        },
    
        onDesktopMenuBeforeShow: function (menu) {
            var me = this, count = me.windows.getCount();
    
            menu.items.each(function (item) {
                var min = item.minWindows || 0;
                item.setDisabled(count < min);
            });
        },
    
        onShortcutItemClick: function (dataView, record) {
            var me = this, module = me.app.getModule(record.data.module),
                win = module && module.createWindow();
    
            if (win) {
                me.restoreWindow(win);
            }
        },
    
        onWindowClose: function(win) {
            var me = this;
            me.windows.remove(win);
            me.taskbar.removeTaskButton(win.taskButton);
            me.updateActiveWindow();
        },
    
        //------------------------------------------------------
        // Window context menu handlers
    
        onWindowMenuBeforeShow: function (menu) {
            var items = menu.items.items, win = menu.theWin;
            items[0].setDisabled(win.maximized !== true && win.hidden !== true); // Restore
            items[1].setDisabled(win.minimized === true); // Minimize
            items[2].setDisabled(win.maximized === true || win.hidden === true); // Maximize
        },
    
        onWindowMenuClose: function () {
            var me = this, win = me.windowMenu.theWin;
    
            win.close();
        },
    
        onWindowMenuHide: function (menu) {
            Ext.defer(function() {
                menu.theWin = null;
            }, 1);
        },
    
        onWindowMenuMaximize: function () {
            var me = this, win = me.windowMenu.theWin;
    
            win.maximize();
            win.toFront();
        },
    
        onWindowMenuMinimize: function () {
            var me = this, win = me.windowMenu.theWin;
    
            win.minimize();
        },
    
        onWindowMenuRestore: function () {
            var me = this, win = me.windowMenu.theWin;
    
            me.restoreWindow(win);
        },
    
        //------------------------------------------------------
        // Dynamic (re)configuration methods
    
        getWallpaper: function () {
            return this.wallpaper.wallpaper;
        },
    
        setTickSize: function(xTickSize, yTickSize) {
            var me = this,
                xt = me.xTickSize = xTickSize,
                yt = me.yTickSize = (arguments.length > 1) ? yTickSize : xt;
    
            me.windows.each(function(win) {
                var dd = win.dd, resizer = win.resizer;
                dd.xTickSize = xt;
                dd.yTickSize = yt;
                resizer.widthIncrement = xt;
                resizer.heightIncrement = yt;
            });
        },
    
        setWallpaper: function (wallpaper, stretch) {
            this.wallpaper.setWallpaper(wallpaper, stretch);
            return this;
        },
    
        //------------------------------------------------------
        // Window management methods
    
        cascadeWindows: function() {
            var x = 0, y = 0,
                zmgr = this.getDesktopZIndexManager();
    
            zmgr.eachBottomUp(function(win) {
                if (win.isWindow && win.isVisible() && !win.maximized) {
                    win.setPosition(x, y);
                    x += 40;
                    y += 40;
                }
            });
        },
    
        createWindow: function(config, cls) {
            var me = this, win, cfg = Ext.applyIf(config || {}, {
                    stateful: false,
                    isWindow: true,
                    constrainHeader: true,
                    minimizable: true,
                    maximizable: true
                });
    
            cls = cls || Ext.window.Window;
            win = me.add(new cls(cfg));
    
            me.windows.add(win);
    
            win.taskButton = me.taskbar.addTaskButton(win);
            win.animateTarget = win.taskButton.el;
    
            win.on({
                activate: me.updateActiveWindow,
                beforeshow: me.updateActiveWindow,
                deactivate: me.updateActiveWindow,
                minimize: me.minimizeWindow,
                destroy: me.onWindowClose,
                scope: me
            });
    
            win.on({
                boxready: function () {
                    win.dd.xTickSize = me.xTickSize;
                    win.dd.yTickSize = me.yTickSize;
    
                    if (win.resizer) {
                        win.resizer.widthIncrement = me.xTickSize;
                        win.resizer.heightIncrement = me.yTickSize;
                    }
                },
                single: true
            });
    
            // replace normal window close w/fadeOut animation:
            win.doClose = function ()  {
                win.doClose = Ext.emptyFn; // dblclick can call again...
                win.el.disableShadow();
                win.el.fadeOut({
                    listeners: {
                        afteranimate: function () {
                            win.destroy();
                        }
                    }
                });
            };
    
            return win;
        },
    
        getActiveWindow: function () {
            var win = null,
                zmgr = this.getDesktopZIndexManager();
    
            if (zmgr) {
                // We cannot rely on activate/deactive because that fires against non-Window
                // components in the stack.
    
                zmgr.eachTopDown(function (comp) {
                    if (comp.isWindow && !comp.hidden) {
                        win = comp;
                        return false;
                    }
                    return true;
                });
            }
    
            return win;
        },
    
        getDesktopZIndexManager: function () {
            var windows = this.windows;
            // TODO - there has to be a better way to get this...
            return (windows.getCount() && windows.getAt(0).zIndexManager) || null;
        },
    
        getWindow: function(id) {
            return this.windows.get(id);
        },
    
        minimizeWindow: function(win) {
            win.minimized = true;
            win.hide();
        },
    
        restoreWindow: function (win) {
            if (win.isVisible()) {
                win.restore();
                win.toFront();
            } else {
                win.show();
            }
            return win;
        },
    
        tileWindows: function() {
            var me = this, availWidth = me.body.getWidth(true);
            var x = me.xTickSize, y = me.yTickSize, nextY = y;
    
            me.windows.each(function(win) {
                if (win.isVisible() && !win.maximized) {
                    var w = win.el.getWidth();
    
                    // Wrap to next row if we are not at the line start and this Window will
                    // go off the end
                    if (x > me.xTickSize && x + w > availWidth) {
                        x = me.xTickSize;
                        y = nextY;
                    }
    
                    win.setPosition(x, y);
                    x += w + me.xTickSize;
                    nextY = Math.max(nextY, y + win.el.getHeight() + me.yTickSize);
                }
            });
        },
    
        updateActiveWindow: function () {
            var me = this, activeWindow = me.getActiveWindow(), last = me.lastActiveWindow;
            if (activeWindow === last) {
                return;
            }
    
            if (last) {
                if (Ext.isEmpty(last.el)) { return; }; //增加这一行
                if (last.el.dom) {
                    last.addCls(me.inactiveWindowCls);
                    last.removeCls(me.activeWindowCls);
                }
                last.active = false;
            }
    
            me.lastActiveWindow = activeWindow;
    
            if (activeWindow) {
                activeWindow.addCls(me.activeWindowCls);
                activeWindow.removeCls(me.inactiveWindowCls);
                activeWindow.minimized = false;
                activeWindow.active = true;
            }
    
            me.taskbar.setActiveButton(activeWindow && activeWindow.taskButton);
        },
        
        //hzm新增方法,应用于界面图标自动换行
        initShortcut : function() {  
            var btnHeight = 64;
            var btnWidth = 64;
            var btnPadding = 30;
            var col = {index : 1,x : btnPadding};
            var row = {index : 1,y : btnPadding};
            var bottom;
            var numberOfItems = 0;
            var taskBarHeight = Ext.query(".ux-taskbar")[0].clientHeight + 40;
            var bodyHeight = Ext.getBody().getHeight() - taskBarHeight;
            var bodyWidth = Ext.getBody().getWidth();
            var items = Ext.query(".ux-desktop-shortcut");
    
            //0:纵向,1:横向
            var gravity = 1;
            
            //横向
            if(gravity) {
                for (var i = 0, len = items.length; i < len; i++) {
                    numberOfItems += 1;
                    right = col.x + btnWidth;
                    if (((bodyWidth < right) ? true : false) && right > (btnWidth + btnPadding)) {
                        numberOfItems = 0;
                        col = {index : 1, x : btnPadding};
                        row = {index : row.index++, y : row.y + btnHeight + btnPadding};
                    }
                    Ext.fly(items[i]).setXY([col.x, row.y]);
                    col.index++;
                    col.x = col.x + btnWidth + btnPadding;
                }
            } else {
                for (var i = 0, len = items.length; i < len; i++) {
                    numberOfItems += 1;
                    bottom = row.y + btnHeight;
                    if (((bodyHeight < bottom) ? true : false) && bottom > (btnHeight + btnPadding)) {
                        numberOfItems = 0;
                        col = {index : col.index++,x : col.x + btnWidth + btnPadding};
                        row = {index : 1,y : btnPadding};
                    }
                    Ext.fly(items[i]).setXY([col.x, row.y]);
                    row.index++;
                    row.y = row.y + btnHeight + btnPadding;
                }
            }
        }
    });

    二、图标大小修改  desktop.css文件

    .ux-desktop-shortcut {
        cursor: pointer;
        text-align: center;
        padding: 8px;
        margin: 8px;
        width: 64px;
    }

    .notepad-shortcut {
        background-image: url(../images/notepadLarge.png);
        48px;
        height: 48px;
    }

  • 相关阅读:
    Delphi下的WinSock编程
    基于Delphi使用API实现Sock通讯
    delphi7与XE的变量与函数的改变
    Delphi7·ProgressBar控件
    delphi 进度条
    delphi带包编译详解(build with runtime package)
    TList 的 quicksort 算法研究和使用。
    Delphi7升级到Delphi 2010、Delphi XE、Delphi XE2总结
    Delphi编译错误代码翻译表
    Firebird(火鸟)数据库 v3.0.3.32900官方版
  • 原文地址:https://www.cnblogs.com/hzm112567/p/3627746.html
Copyright © 2011-2022 走看看