Extjs4—自己寫瞭個類似web desktop的小程序

我看瞭Extjs4的web desktop挺好的,就自己寫瞭一個類似的,希望和大傢交流一下,希望能給出好的建議
這個1.0版本,沒用連接數據庫,不斷更新中
 添加程序的方法:
1、“安裝”:把自己的建的view放到app.view中
2、“註冊”:在Application中“註冊”到桌面快捷方式

app.js:
[javascript] 
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中公共的方法
[javascript]
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
[javascript] view plaincopy
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用於放桌面的程序:
[javascript]
//註冊程序,在桌面顯示 
 
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:桌面
[javascript]
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",{}), 
          ], 
     
    //一個p表示一個item 
    itemSelector: 'p.thumb-wrap', 
     
    tpl: [ 
          '<tpl for=".">', 
             '<p id="application" class="thumb-wrap">' , 
                   '<img src="icons/{thumb}" width="50" height="50" /><br/>' , 
                   '<span>{name}</span>', 
              '</p>', 
              //'<tpl if="xindex % 4 == 0"><br /></tpl>', 
          '</tpl>' 
     ] 
}); 

South.js任務欄:
[javascript] 
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程序“我的電腦”
[javascript] 
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);   
    }   
     
}); 

效果圖:

 

發佈留言