Extjs4完美的桌面图标换行的实现

一个完美的Extjs4的桌面图标的实现,花了很多的时间终于找到了这份代码

效果图:

实现步骤:

1. desktop.js 里添加以下

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();
       }

2. desktop.js 里找到

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)
    };
},

在里面添加监听事件,最后的效果

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 : this.initShortcut
                    // 这里调用
                    }

                };
            },

3. 在app.js里添加

init : function() {
    // custom logic before getXYZ methods get called...
    this.callParent();
    // 自定的的图标换
    this.desktop.initShortcut();
},

4. 当需要增加或删除图标的时候,使用

desktop.shortcutsView.getStore().remove(desktop.handerObj);

desktop.initShortcut();

本文参考了代码,  http://lihui.luo.blog.163.com/blog/static/189690620111152321374/, 因其代码不完整, 才发布了此文