用ExtJS 4.0打造自己的Web桌面

本教程基于ExtJS 4.0版本,从静态桌面图标换行讲起,到实现自己的动态WEB桌面,可以像webQQ那样添加应用, 打开应用。本教程不包括详细js代码和服务器代码,但基本思路及主要代码给出。

ExtJS中运用HTML5 Canvas简单例子

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
 
        });
 
    },

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/c2ae144bc8bfcd15005eb3b796f3571b.html