ExtJS Desktop桌面图标换行

来源：互联网发布：bot的知识图谱数据api 编辑：程序博客网时间：2024/05/16 15:17

开始想着不用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啦

0 0