Extjs4---自己写了个类似web desktop的小程序

我看了Extjs4的web desktop挺好的，就自己写了一个类似的，希望和大家交流一下，希望能给出好的建议

这个1.0版本，没用连接数据库，不断更新中

完整代码下载：http://www.luchg.com/resource/showResource_7.html

添加程序的方法：

1、“安装”：把自己的建的view放到app.view中

2、“注册”：在Application中“注册”到桌面快捷方式

app.js:

Ext.Loader.setConfig({enabled:true});Ext.application({name:'WD',appFolder:'app',launch:function(){Ext.create('Ext.container.Viewport',{layout:'border',items:[{//桌面xtype:'center'},{//任务栏xtype:'south'}]});},controllers:['Controller']});

Method.js:用于放controller中公共的方法

Ext.define('WD.controller.Method',{//打开应用openApplication:function(name,url){console.log(name);//程序名称console.log(url);//打开程序的url//找到对应程序的viewvar view = 'WD.view.'+url.substr(0,1).toUpperCase()+url.substr(1);console.log(view);//判断该程序是否已经打开var newApplication = Ext.getCmp(url);//如果没有打开，新建一个并显示if(!newApplication){render: this.openAddButton(name,url)Ext.create(view,{}).show();}else{//如果已经打开，则直接显示newApplication.show();}/*if(url == 'myComputer'){        var myComputer = Ext.getCmp('myComputer');        if(!myComputer){        render: this.openAddButton(url,name)        Ext.create('WD.view.MyComputer',{}).show();        }else{        myComputer.show();        }        }else if(url == 'myDocument'){        var myDocument = Ext.getCmp('myDocument');        if(!myDocument){        render: this.openAddButton(url,name)        Ext.create('WD.view.MyDocument',{}).show();        }else{        myDocument.show();        }                }        */},//打开程序时添加状态栏按钮openAddButton:function(name,url){Ext.getCmp("south").add([{        xtype:'button',        id:url+"Button",        text:name,        handler:function(){        Ext.getCmp(url).show();        }        }]);}});

Controller.js

Ext.define('WD.controller.Controller',{extend:'Ext.app.Controller',views:['Center','South'],models:[],stores:['ApplicationStore','BookStore'],init:function(){var method = Ext.create('WD.controller.Method');this.control({//桌面监听事件'center':{//双击打开应用itemdblclick: function(view, record, item, index, e,  eOpts){            render:method.openApplication(record.raw.name,record.raw.url);    },        //鼠标移到图标时的事件    itemmouseenter:function(view,record,item,index, e, eOpts ){    item.style.backgroundColor = 'yellow';    },    itemmouseleave:function(view,record,item,index, e, eOpts ){    item.style.backgroundColor = '';    },        //容器右键菜单    containercontextmenu:function(view, e,eOpts ){    e.preventDefault();    e.stopEvent();         var menu = new Ext.menu.Menu({                   //控制右键菜单位置                   float:true,                    items:[{                           text:"设置",                           iconCls:'leaf',                           handler:function(){                               //当点击时隐藏右键菜单                               this.up("menu").hide();                               alert("设置");                           }                       }                  ]               }).showAt(e.getXY());//让右键菜单跟随鼠标位置      },        //桌面item的右键事件    itemcontextmenu:function(view,record, item,index,e,eOpts ){    e.preventDefault();    e.stopEvent();         var menu = new Ext.menu.Menu({                   //控制右键菜单位置                   float:true,                    items:[{                           text:"打开",                           iconCls:'leaf',                           handler:function(){                               //当点击时隐藏右键菜单                               this.up("menu").hide();                             //scope:this                             render:method.openApplication(record.raw.name,record.raw.url);                         }                  },{                           text:"属性",                           iconCls:'leaf',                           handler:function(){                               //当点击时隐藏右键菜单                               this.up("menu").hide();                               alert("属性");                           }                     }                  ]               }).showAt(e.getXY());//让右键菜单跟随鼠标位置      }}})}});

ApplicationStore.js用于放桌面的程序：

//注册程序，在桌面显示Ext.define('WD.store.ApplicationStore',{extend:'Ext.data.Store',//model:'WD.model.Application',fields: ['name', 'thumb' ],data:[        {        name: '我的电脑',//程序名称，在状态栏显示的程序名称        thumb: '../images/myComputer.png',//程序图标，在桌面显示        url: 'myComputer',//程序的url，与程序的id相同        type: 'Application'    },    {        name: '我的文档',        thumb: '../images/myDocument.png',        url: 'myDocument',        type: 'Application'    },{    name:'记事本',    thumb: '../images/myDocument.png',    url:'myNote',    type:'Application'    }    ]});

Center.js:桌面

Ext.Loader.setConfig({ enabled: true })Ext.Loader.setPath("Ext.ux.DataView", "../webdesktop/extjs4/ux/DataView");Ext.define('WD.view.Center',{extend:'Ext.view.View',alias:'widget.center',region:'center',id:'center',    layout:'fit',        store:'ApplicationStore',        bodyStyle: {    background: '#0974c6',    padding: '10px'},    plugins:[              Ext.create("Ext.ux.DataView.DragSelector",{}),          ],    //一个div表示一个itemitemSelector: 'div.thumb-wrap',tpl: [          '<tpl for=".">',             '<div id="application" class="thumb-wrap">' ,                   '<img src="icons/{thumb}" width="50" height="50" /><br/>' ,                   '<span>{name}</span>',              '</div>',              //'<tpl if="xindex % 4 == 0"><br /></tpl>',          '</tpl>'     ]});

South.js任务栏：

var method = Ext.create('WD.controller.Method');Ext.define('WD.view.South',{extend:'Ext.panel.Panel',alias:'widget.south',region:'south',id:'south',//title:'任务栏',bodyStyle: {    background: '#a5adb3',    padding: '10px'},height:35,items:[Ext.create("Ext.button.Split", {    text: "Start",        iconAlign: 'left',    menu:    {        items: [            {                text: '我的电脑',                handler:function(){                method.openApplication('我的电脑','myComputer')                }                            }, {                text: '我的文档',                handler:function(){                method.openApplication('我的文档','myDocument')                }            }, {                text: '控制面板',                handler: function () {                    //Ext.Msg.alert("提示", "来自菜单的消息");                }            }        ]    },    arrowAlign: 'right'}),{xtype:'button',text:'|'}],initComponent:function(){this.callParent(arguments);}});

MyComputer.js程序“我的电脑”

Ext.define('WD.view.MyComputer',{extend:'Ext.window.Window',initComponent:function(){          Ext.apply(this,{          title:'我的电脑',        id:'myComputer',        width:500,        height:400,        tools:[{            type:'minimize',            tooltip: '最小化',            // hidden:true,            handler: function(event, toolEl, panel){                Ext.getCmp("myComputer").hide();            }        }],        listeners:{        close:function(panel,ePots){        Ext.getCmp("south").remove("myComputerButton");        }        }        }),          this.callParent(arguments);      }  });

效果图：