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']
});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: [
'',
'' ,
'
' ,
'{name}',
'',
//'
'
]
});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);
}
});效果图：