您的位置:首页 > Web前端 > JavaScript

extjs4.2 desktop 桌面图标换行

2015-01-04 14:34 676 查看
在自带的extjs4.2 desktop例子基础上,修改 desktop.js 文件  添加如下代码:

//shortcuts 自动换行
initShortcut: function () {
var btnHeight = 64;
var btnWidth = 64;
var btnPadding = 30;
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");
var col = { index: 1, x: btnPadding };
var row = { index: 1, y: btnPadding };
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;

};
},
//end shortcuts 自动换行


然后,在函数afterRender 里加入执行这段代码的行 Ext.Function.defer(me.initShortcut, 600); 

afterRender: function () {
var me = this;
me.callParent();
me.el.on('contextmenu', me.onDesktopMenu, me);
Ext.Function.defer(me.initShortcut, 600); // 执行换行代码
},

 增加这两处代码后,即实现了桌面图标换行.

--------------------------------------------------------------------
源码下载:  http://download.csdn.net/detail/olinbsoft/8326735
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息