管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

ExtJS[Desktop]实现图标换行示例代码

　　ExtJS中的desktop的demo中，默认的图标排列是不换行的，这就造成了如果桌面上的图标过多的话，当超出桌面区域，会造成图标遮盖，即超出桌面区域的部分会被任务栏遮挡，以下代码就是为了解决这一问题的。

　　首先，在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);

　　}

教程首页 更多教程