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
		
		//找到对应程序的view
		var 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表示一个item
	itemSelector: '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);  
    }  
	
});

效果图：