ExtJS[Desktop]实现图标换行示例代码
2013-11-17 00:00
651 查看
ExtJS中的desktop的demo中,默认的图标排列是不换行的,这就造成了如果桌面上的图标过多的话,当超出桌面区域,会造成图标遮盖,即超出桌面区域的部分会被任务栏遮挡,以下代码就是为了解决这一问题的。
首先,在desktop.js中扩展一个函数。
然后在当前的js文件中的createDataView方法中,添加一个监听器。
再者,在afterRender渲染结束时调用函数。
首先,在desktop.js中扩展一个函数。
initShortcut : function() { var btnHeight = 64; var btnWidth = 64; var btnPadding = 30; var col = {index : 1,x : btnPadding}; var row = {index : 1,y : btnPadding}; 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"); 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; } }
然后在当前的js文件中的createDataView方法中,添加一个监听器。
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:me.initShortcut } }; }
再者,在afterRender渲染结束时调用函数。
afterRender: function () { var me = this; me.callParent(); me.el.on('contextmenu', me.onDesktopMenu, me); Ext.Function.defer(me.initShortcut,1); }
相关文章推荐
- ExtJS[Desktop]实现 图标换行
- Ext4 desktop 桌面图标换行实现
- extjs4.2 desktop 核心文件 + 换行 + 图标拖动
- Extjs4 desktop 图标自动换行,横纵排列 图标大小修改
- 完美解决Extjs 4 desktop图标换行问题
- ExtJs4 desktop 开发 桌面图标换行
- extjs4.2 desktop 桌面图标换行
- ExtJS Desktop桌面图标换行
- Extjs表单元素实现横向、多列布局,最简单的代码示例
- Extjs4.1.1 desktop图标自动换行解决方法
- Android实现动态改变app图标的示例代码
- extjs desktop中桌面图标换行
- 链表的原理及java实现代码示例
- C#实现闪动托盘图标示例
- php sso 单点登录的实现 代码示例
- 【示例代码】CSS3实现多种颜色的底部阴影按钮特效
- Asp.net 2.0 自定义控件开发[实现自动计算功能(AutoComputeControl)][示例代码下载]
- Ajax实现的异步传输与验证示例代码
- ExtJS4.1 desktop桌面图标自动换行