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 文件中修改的