读书人

完美解决desktop图标换行有关问题

发布时间: 2012-08-15 16:57:17 作者: rapoo

完美解决desktop图标换行问题
最近看到不少人询问关于在4.0中实现desktop图标换行的问题,现在把我修改的实现方法分享出来,帮助大家完善desktop。此方法能随浏览器的大小自动排列图标

在desktop.js中扩展一个函数

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 items = Ext.query(".ux-desktop-shortcut");        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;        }    }

但是我在4.0.7中测试 Ext.query(".ux-taskbar")undefined 所以附上另一个initShortcut
initShortcut : function() {        var btnHeight = 80;        var btnWidth = 80;        var btnPadding = 8;        var col = null;        var row = null;        var bottom;        var bodyHeight = Ext.getBody().getHeight();        function initColRow() {            col = {               index : 1,               x : btnPadding            };            row = {               index : 1,               y : btnPadding + 27            };        }        this.setXY = function(item) {            bottom = row.y + btnHeight;            if (bottom > bodyHeight && bottom > (btnHeight + btnPadding)) {               col = {                   index : col.index++,                   x : col.x + btnWidth + btnPadding               };               row = {                   index : 1,                   y : btnPadding + 27               };            }            Ext.fly(item).setXY([col.x, row.y]);            row.y = row.y + btnHeight + btnPadding + 4;        }             this.handleUpdate = function() {            initColRow();             var items = Ext.query(".ux-desktop-shortcut");             for (var i = 0, len = items.length; i < len; i++) {                 this.setXY(items[i]);             }         };         this.handleUpdate();}

在createDataView添加一个监听器
createDataView: function () {        var me = this;        return {            xtype: 'dataview',            overItemCls: 'x-view-over',            trackOver: true,            itemSelector: me.shortcutItemSelector,            store: me.shortcuts,            tpl: new Ext.XTemplate(me.shortcutTpl),            listeners:{                resize:me.initShortcut            }        };    }

在afterRender渲染结束时调用函数
afterRender: function () {        var me = this;        me.callParent();        me.el.on('contextmenu', me.onDesktopMenu, me);        Ext.Function.defer(me.initShortcut,1);    }

读书人网 >Web前端

热点推荐