ExtJS Desktop桌面图标换行

开始想着不用dataview做，改container但刚入门的菜鸟表示实在是有点崩溃。

然后就看到了大牛的实现，自己理解实践了一下，记录一下

在渲染后和窗体大小变化时调用函数对图标进行重新排列，函数如下：

初次渲染后：

</pre><pre name="code" class="javascript">afterRender: function () {  
    var me = this;  
    me.callParent();  
    me.el.on('contextmenu', me.onDesktopMenu, me);  
    // 实现桌面图标自动换行  
    Ext.Function.defer(me.initShortcut, 1);  
}, 

然后在createDataView函数中添加监听器：

createDataView: function () {  
        var me = this;  
        return {  
            xtype: 'dataview',  
            overItemCls: 'x-view-over',  
            trackOver: true,  
            itemSelector: me.shortcutItemSelector,  
            store: me.shortcuts,  
//            style: {  
                position: 'absolute'  
            },  
//            x: 0, y: 0,  
            // 实现桌面图标自动换行  
            listeners:{    
                resize: me.initShortcut    
            },  
            tpl: new Ext.XTemplate(me.shortcutTpl)  
        };  
    },  

然后就是那个函数的具体实现啦：

initShortcut : function() {
    var btnHeight = 64;
    var btnWidth = 64;
    var btnPadding = 25;
    var col = {index: 1, x: btnPadding};
    var row = {index: 1, y: btnPadding};
    var bottom;
    // 任务栏高度
    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++) {、
	// row的值在每次部署好上一个button后更新
        // bottom是当前button如果放到最底部的Y值
        bottom = row.y + btnHeight;
	// bottom位置已经超出body的高度了，而且这一列已经放了至少一个button
        if ((bottom > bodyHeight) && bottom > (btnHeight + btnPadding)) {
	    //那么你就去下一列吧，index,XY值也随之改变
            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;
    }    
},  

好吧，但是又出现了新问题，前面出现了想ul.li前面一样的小点点标记，还没解决，菜鸟加油。

呃，设置了display:list-item，简直是自己挖坑自己跳啊，OK啦