我的博客

关于工作

日志

java hadoop分布式系统文件操作

[原创]用extjs 4.0打造自己的WEB桌面之二

[原创]用extjs 4.0打造自己的WEB桌面之一

2011-12-05 14:32:01| 分类：教程学习 | 标签： |字号大中小订阅

原创，引用请注明出处：http://lihui.luo.blog.163.com/blog/static/189690620111152321374/

用extjs 4.0打造自己的WEB桌面

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

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: 'System Status', iconCls: 'cpu-shortcut', module: 'systemstatus'}

]

}),

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

wallpaperStretch: false

});

},

评论这张

转发至微博

0人 | 分享到：

阅读(244)| 评论(0)| 引用 (0) |举报

java hadoop分布式系统文件操作

[原创]用extjs 4.0打造自己的WEB桌面之二

历史上的今天

this.p={  m:2,
              b:2,
              id:'fks_087067080094081071092085085070072087089074082095086069',
              blogTitle:'[原创]用extjs 4.0打造自己的WEB桌面之一',
              blogAbstract:'<p align=\"center\"  style=\"text-align: left;\"  \><b\><span style=\"font-family: 宋体;\"  \><font size=\"2\"  \>原创，引用请注明出处：<a href=\"http://lihui.luo.blog.163.com/blog/static/189690620111152321374/\"  \>http://lihui.luo.blog.163.com/blog/static/189690620111152321374/</a\></font\></span\></b\></p\><p align=\"center\"  style=\"text-align:center;\"  \><b\><span style=\"font-size:15.0pt;font-family:宋体;mso-ascii-font-family: Calibri;mso-ascii-theme-font:minor-latin;mso-fareast-font-family:宋体;mso-fareast-theme-font: minor-fareast;mso-hansi-font-family:Calibri;mso-hansi-theme-font:minor-latin;\"  \>用</span\></b\><b\><span lang=\"EN-US\"  style=\"font-size:15.0pt;\"  \>extjs 4.0</span\></b\><b\></b\></p\>',
              blogTag:'extjs4,web桌面,desktop,图标换行,动态图标',
              blogUrl:'blog/static/189690620111152321374',
              isPublished:1,
              istop:false,
              type:0,
              modifyTime:1323132869848,
              publishTime:1323066721374,
              permalink:'blog/static/189690620111152321374',
              commentCount:0,
              mainCommentCount:0,
              recommendCount:0,
              bsrk:-100,
              publisherId:0,
              recomBlogHome:false,
              attachmentsFileIds:[],
              vote:{},
              groupInfo:{},
              friendstatus:'none',
              followstatus:'unFollow',
              pubSucc:'',
              visitorProvince:'未设置',
              visitorCity:'未设置',
              postAddInfo:{},
              mset:'000',
              mcon:'',
              srk:-100,
              remindgoodnightblog:false,
              isBlackVisitor:false,
              isShowYodaoAd:false,
              hostIntro:'',
              hmcon:'1',
              lofter_single:'<a hidefocus="true" target="_blank" href="http://www.lofter.com/touch"><img onload="var nimg = new Image(); nimg.src=\'http://blog.163.com/newpage/images/analyse.png?lofter_single&t=\'+new Date().getTime()" border="0" src="http://b2.bst.126.net/newpage/images/lofter_single4.jpg"/></a>'
            }

{list a as x}
    {if !!x}
    <div class="iblock nbw-fce nbw-f40">
      <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.visitorName}/">
      {if x.visitorName==visitor.userName}
      <img alt="${x.visitorNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.visitorName)}&r=${visitor.imageUpdateTime}"/>
      {else}
      <img alt="${x.visitorNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.visitorName)}"/>
      {/if}
      </a>
      <div class="cwd vname thide">
        {if x.moveFrom=='wap'}
          <a class="noul pnt" target="_blank" href="http://blog.163.com/services/wapblog.html?frompersonalbloghome"><span title="来自网易手机博客" class="iblock wapIcon"> </span></a>
        {elseif x.moveFrom=='iphone'}
          <a class="noul pnt" target="_blank"><span title="来自iPhone客户端" class="iblock iphoneIcon"> </span></a>
        {elseif x.moveFrom=='android'}
          <a class="noul pnt" target="_blank"><span title="来自Android客户端" class="iblock androidIcon"> </span></a>
        {elseif x.moveFrom=='mobile'}
          <a class="noul pnt" target="_blank" href="http://blog.163.com/services/emsblog.html?frompersonalbloghome"><span title="来自网易短信写博" class="iblock wapIcon"> </span></a>
        {/if}
        <a class="fc03 m2a"  target="_blank" hidefocus="true" href="http://blog.163.com/${x.visitorName}/">
          ${fn(x.visitorNickname,8)|escape}
        </a>
      </div>
    </div>
    {/if}
    {/list}

<#--最新日志，群博日志--> <#--推荐日志-->

<p class="fc06">推荐过这篇日志的人：</p>
    <div>
      {list a as x}
      {if !!x}
      <div class="iblock nbw-fce nbw-f40">
        <a class="fc03 noul" target="_blank" hidefocus="true" href="http://blog.163.com/${x.recommenderName}/">
        <img alt="${x.recommenderNickname|escape}" onerror="this.src=location.f40" class="cwd bdwa bdc0" src="${fn1(x.recommenderName)}"/>
        </a>
        <div class="cwd thide">
          <a class="fc03 m2a" target="_blank" hidefocus="true" href="http://blog.163.com/${x.recommenderName}/">
            ${fn(x.recommenderNickname,6)|escape}
          </a>
        </div>
      </div>
      {/if}
      {/list}
    </div>
    {if !!b&&b.length>0}
    <p  class="fc06">他们还推荐了：</p>
    <ul>
    {list b as y}
      {if !!y}
        <li class="rrb"><span class="iblock">·</span><a class="fc03 m2a" target="_blank" href="http://blog.163.com/${y.recommendBlogPermalink}/?from=blog/static/189690620111152321374">${y.recommendBlogTitle|escape}</a></li>
      {/if}
    {/list}
    </ul>
    {/if}

<#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--相关文章--> <#--历史上的今天--> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->

页脚

公司简介 - 联系方法 - 招聘信息 - 客户服务 - 隐私政策 - 博客风格 - 手机博客 - VIP博客 - 订阅此博客

我的博客

导航

日志

[原创]用extjs 4.0打造自己的WEB桌面之一

历史上的今天

相关文章

最近读者

评论

页脚