Ext4 desktop 桌面图标换行兑现

Ext4 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;

         }

     }

下来在在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);

},

OK 赶紧试试吧

。。。。。全部是在desktop.js文件中修改的