Ext Desktop快捷方式自动换行

最新推荐文章于 2025-02-24 22:32:01 发布

snail8384

最新推荐文章于 2025-02-24 22:32:01 发布

阅读量680

点赞数

CC 4.0 BY-SA版权

分类专栏： ExtJS

本文链接：https://blog.youkuaiyun.com/snail8384/article/details/8302226

ExtJS 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种在桌面环境中实现快捷方式自动排列的方法。通过计算每个按钮的位置，并根据屏幕尺寸和任务栏高度调整布局，确保所有图标都能整齐排列且不超出屏幕范围。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在Desktop.js末尾添加函数：

//shortcuts 自动换行

       shortcutAutoArrange: function(){
        var btnHeight = 61;
           var btnWidth = 64;
           var btnPadding = 15;
           var col = {index: 1, x: btnPadding};
           var row = {index: 1, y: btnPadding};
           var taskbarHeight = Ext.query('.ux-taskbar')[0].clientHeight;
           var bodyHeight = Ext.getBody().getHeight() - taskbarHeight;
           var items = Ext.query(".ux-desktop-shortcut");
           for(var i = 0, len = items.length; i < len; i++){
               var bottom = row.y + btnHeight;
               var overflow = false;
               var y = row.y + btnHeight;
               //至少要放置一行
               if(y > btnHeight && (y > bodyHeight)){ // || y + this.btnHeight > bodyHeight)){
                   overflow = true;
               }

               if(overflow && bottom > (btnHeight + btnPadding)){
                   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;
           }
       }
       //end shortcuts 自动换行

在initComponent函数中添加：

Ext.EventManager.onWindowResize(this.shortcutAutoArrange, this, {delay:500});

同时在afterRender函数中添加：

Ext.Function.defer(me.shortcutAutoArrange, 100);