用ExtJS 4.0创建自己的Web桌面

发布时间：2021-11-20 14:04:25 所属栏目：教程来源：互联网

导读：1. 桌面图标自动换行 1.1. 增加一个换行的方法这是参考网上换行例子。建议加在desktop.js中，因为是属于desktop的行为。 initShortcut : function() { var btnHeight = 80; var btnWidth = 80; var btnPadding = 8; var col = null; var row = null; var bo

1.      桌面图标自动换行

1.1. 增加一个换行的方法

这是参考网上换行例子。建议加在desktop.js中，因为是属于desktop的行为。

initShortcut : function() {

      var btnHeight = 80;

      var btnWidth = 80;

      var btnPadding = 8;

      var col = null;

      var row = null;

      var bottom;

      var bodyHeight = Ext.getBody().getHeight();



      function initColRow() {

          col = {

              index : 1,

              x : btnPadding

          };

          row = {

              index : 1,

              y : btnPadding + 27

          };

      }

      this.setXY = function(item) {

          bottom = row.y + btnHeight;

          if (bottom > bodyHeight && bottom > (btnHeight + btnPadding)) {

              col = {

                  index : col.index++,

                  x : col.x + btnWidth + btnPadding

              };

              row = {

                  index : 1,

                  y : btnPadding + 27

              };

          }

          Ext.fly(item).setXY([col.x, row.y]);

          row.y = row.y + btnHeight + btnPadding + 4;

      }

1.2. 在适当的地方调用

第一个地方是初始化时。

如Apps.js中的init：

    init: function() {

        this.callParent();

        this.desktop.initShortcut();

    }

第二个地方是resize时。如在desktop.js中的dataView中注册一事件：

    createDataView: function () {

        var a = this;

        return {

            xtype: "dataview",

            overItemCls: "x-view-over",

            trackOver: true,

            itemSelector: a.shortcutItemSelector,

            store: a.shortcuts,

            tpl: new Ext.XTemplate(a.shortcutTpl),

            listeners:{

              resize:this.initShortcut //这里调用

            }

        }

    }

第三个地方是删除图标或者增加图标时。

如删除：

desktop.shortcutsView.getStore().remove(desktop.handerObj);

desktop.initShortcut();

  // handerObj是桌面图标对象，在点击图标事件时可以获得

还有其它……

1.3. 测试

在App.js中的getDesktopConfig中，通过复制增加图标，这样才能看到效果：

    getDesktopConfig: function () {

        var me = this, ret = me.callParent();

        return Ext.apply(ret, {

            //cls: 'ux-desktop-black',

            contextMenuItems: [

                { text: 'Change Settings', handler: me.onSettings, scope: me }

            ],

            shortcuts: Ext.create('Ext.data.Store', {

                model: 'Ext.ux.desktop.ShortcutModel',

                data: [

                    { name: 'Grid Window', iconCls: 'grid-shortcut', module: 'grid-win' },

                    { name: 'Accordion Window', iconCls: 'accordion-shortcut', module: 'acc-win' },

                    { name: 'Notepad', iconCls: 'notepad-shortcut', module: 'notepad' },

                                      { name: 'Notepad', iconCls: 'notepad-shortcut', module: 'notepad' },

                                      { name: 'Notepad', iconCls: 'notepad-shortcut', module: 'notepad' },

                                      { name: 'Notepad', iconCls: 'notepad-shortcut', module: 'notepad' },

                                      { name: 'Notepad', iconCls: 'notepad-shortcut', module: 'notepad' },

                                      { name: 'Notepad', iconCls: 'notepad-shortcut', module: 'notepad' },

                                      { name: 'Notepad', iconCls: 'notepad-shortcut', module: 'notepad' },

                    { name: 'System Status', iconCls: 'cpu-shortcut', module: 'systemstatus'}

                ]

            }),

            wallpaper: 'wallpapers/Blue-Sencha.jpg',

            wallpaperStretch: false

        });

    },

（编辑：开发网_开封站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

台式电脑怎样恢复系统	iso其是什么格式怎么打
电脑上对话框太大如何	小白重装系统Bootfix.