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
//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
相关文章推荐
- extjs desktop中桌面图标换行
- Extjs4.2 Desktop 桌面图标拖动白屏的解决
- ExtJS Desktop桌面图标换行
- ExtJs4 desktop 开发 桌面图标换行
- Extjs4.2 Desktop 拖动黑色和白色的桌面图标的解决方案
- extjs4.2 desktop 桌面图标拖动
- extjs4.2 desktop 核心文件 + 换行 + 图标拖动
- ExtJS[Desktop]实现 图标换行
- ExtJS4.1 desktop桌面图标自动换行
- Extjs2.0 desktop 动态创建桌面图标和开始菜单
- Extjs4.07 桌面图标换行
- ExtJs4.2 desktop和java play framework桌面应用
- 完美解决Extjs 4 desktop图标换行问题
- ExtJS[Desktop]实现图标换行示例代码
- Extjs4 desktop 图标自动换行,横纵排列 图标大小修改
- Ext4 desktop 桌面图标换行实现
- ExtJS4.1 desktop桌面图标自动换行
- Extjs4.1.1 desktop图标自动换行解决方法
- ExtJs桌面组件(DeskTop)