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啦