本文介绍了如何利用Ext这个强大的JavaScript类库来模拟Windows桌面。Ext基于面向对象编程，包含data、widget、form、grid、dd、menu等多个组件，其中grid组件尤为强大。文章提到了Ext的核心文件，并展示了模拟桌面的实现效果，包括HTML和JavaScript代码片段。
模拟Windows桌面
Ext介绍
Ext是一个强大的js类库，以前是基于雅虎UI,现在已经完全独立了。
主要包括data、widget、form、grid、dd、menu，其中最强大的应该算grid了，编程思想是基于面向对象编程(oop)，扩展性相当的好。可以自己写扩展，自己定义命名空间。
主要包括三个大的文件:ext-all.css,ext-base.js,ext-all.js(包括所有的类库，您可以根据需要进行删减。官方网站提供这一接口)，在引用ext类库的时候，这三个文件必不可少。
它提供了丰富的，非常漂亮的外观体验，成为众多界面层开发人员的追捧!其核心的组件基本覆盖了我们构建client的常用的组件。
效果图
参考代码如下：
HTML代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Ext 2.0 Desktop Sample App</title>
<link rel="stylesheet" type="text/css" href="css/ext-all.css" />
<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="js/ext-base.js"></script>
<!-- ENDLIBS -->
<script type="text/javascript" src="js/ext-all.js"></script>
<!-- DESKTOP -->
<script type="text/javascript" src="js/StartMenu.js"></script>
<script type="text/javascript" src="js/TaskBar.js"></script>
<script type="text/javascript" src="js/Desktop.js"></script>
<script type="text/javascript" src="js/App.js"></script>
<script type="text/javascript" src="js/Module.js"></script>
<script type="text/javascript" src="sample.js"></script>
<link rel="stylesheet" type="text/css" href="css/desktop.css" />
</head>
<body scroll="no">
<div id="x-desktop">
<a href="http://extjs.com" target="_blank" style="margin:5px; float:right;"><img src="images/powered.gif" /></a>
<dl id="x-shortcuts">
<dt id="grid-win-shortcut">
<a href="#"><img src="images/s.gif" />
<div>Grid Window</div></a>
</dt>
<dt id="acc-win-shortcut">
<a href="#"><img src="images/s.gif" />
<div>Accordion Window</div></a>
</dt>
</dl>
</div>
<div id="ux-taskbar">
<div id="ux-taskbar-start"></div>
<div id="ux-taskbuttons-panel"></div>
<div class="x-clear"></div>
</div>
</body>
</html>
js代码：
/*
* Ext JS Library 2.2.1
* Copyright(c) 2006-2009, Ext JS, LLC.
* licensing@extjs.com
*
* http://extjs.com/license
*/
// Sample desktop configuration
MyDesktop = new Ext.app.App({
init :function(){
Ext.QuickTips.init();
},
getModules : function(){
return [
new MyDesktop.GridWindow(),
new MyDesktop.TabWindow(),
new MyDesktop.AccordionWindow(),
new MyDesktop.BogusMenuModule(),
new MyDesktop.BogusModule()
];
},
// config for the start menu
getStartConfig : function(){
return {
title: 'Jack Slocum',
iconCls: 'user',
toolItems: [{
text:'Settings',
iconCls:'settings',
scope:this
},'-',{
text:'Logout',
iconCls:'logout',
scope:this
}]
};
}
});
/*
* Example windows
*/
MyDesktop.GridWindow = Ext.extend(Ext.app.Module, {
id:'grid-win',
init : function(){
this.launcher = {
text: 'Grid Window',
iconCls:'icon-grid',
handler : this.createWindow,
scope: this
}
},
createWindow : function(){
var desktop = this.app.getDesktop();
var win = desktop.getWindow('grid-win');
if(!win){
win = desktop.createWindow({
id: 'grid-win',
title:'Grid Window',
width:740,
height:480,
iconCls: 'icon-grid',
shim:false,
animCollapse:false,
constrainHeader:true,
layout: 'fit',
items:
new Ext.grid.GridPanel({
border:false,
ds: new Ext.data.Store({
reader: new Ext.data.ArrayReader({}, [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'}
]),
data: Ext.grid.dummyData
}),
cm: new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
{header: "Company", width: 120, sortable: true, dataIndex: 'company'},
{header: "Price", width: 70, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
{header: "Change", width: 70, sortable: true, dataIndex: 'change'},
{header: "% Change", width: 70, sortable: true, dataIndex: 'pctChange'}
]),
viewConfig: {
forceFit:true
},
//autoExpandColumn:'company',
tbar:[{
text:'Add Something',
tooltip:'Add a new row',
iconCls:'add'
}, '-', {
text:'Options',
tooltip:'Blah blah blah blaht',
iconCls:'option'
},'-',{
text:'Remove Something',
tooltip:'Remove the selected item',
iconCls:'remove'
}]
})
});
}
win.show();
}
});
MyDesktop.TabWindow = Ext.extend(Ext.app.Module, {
id:'tab-win',
init : function(){
this.launcher = {
text: 'Tab Window',
iconCls:'tabs',
handler : this.createWindow,
scope: this
}
},
createWindow : function(){
var desktop = this.app.getDesktop();
var win = desktop.getWindow('tab-win');
if(!win){
win = desktop.createWindow({
id: 'tab-win',
title:'Tab Window',
width:740,
height:480,
iconCls: 'tabs',
shim:false,
animCollapse:false,
border:false,
constrainHeader:true,
layout: 'fit',
items:
new Ext.TabPanel({
activeTab:0,
items: [{
title: 'Tab Text 1',
header:false,
html : '<p>Something useful would be in here.</p>',
border:false
},{
title: 'Tab Text 2',
header:false,
html : '<p>Something useful would be in here.</p>',
border:false
},{
title: 'Tab Text 3',
header:false,
html : '<p>Something useful would be in here.</p>',
border:false
},{
title: 'Tab Text 4',
header:false,
html : '<p>Something useful would be in here.</p>',
border:false
}]
})
});
}
win.show();
}
});
MyDesktop.AccordionWindow = Ext.extend(Ext.app.Module, {
id:'acc-win',
init : function(){
this.launcher = {
text: 'Accordion Window',
iconCls:'accordion',
handler : this.createWindow,
scope: this
}
},
createWindow : function(){
var desktop = this.app.getDesktop();
var win = desktop.getWindow('acc-win');
if(!win){
win = desktop.createWindow({
id: 'acc-win',
title: 'Accordion Window',
width:250,
height:400,
iconCls: 'accordion',
shim:false,
animCollapse:false,
constrainHeader:true,
tbar:[{
tooltip:{title:'Rich Tooltips', text:'Let your users know what they can do!'},
iconCls:'connect'
},'-',{
tooltip:'Add a new user',
iconCls:'user-add'
},' ',{
tooltip:'Remove the selected user',
iconCls:'user-delete'
}],
layout:'accordion',
border:false,
layoutConfig: {
animate:false
},
items: [
new Ext.tree.TreePanel({
id:'im-tree',
title: 'Online Users',
loader: new Ext.tree.TreeLoader(),
rootVisible:false,
lines:false,
autoScroll:true,
tools:[{
id:'refresh',
on:{
click: function(){
var tree = Ext.getCmp('im-tree');
tree.body.mask('Loading', 'x-mask-loading');
tree.root.reload();
tree.root.collapse(true, false);
setTimeout(function(){ // mimic a server call
tree.body.unmask();
tree.root.expand(true, true);
}, 1000);
}
}
}],
root: new Ext.tree.AsyncTreeNode({
text:'Online',
children:[{
text:'Friends',
expanded:true,
children:[{
text:'Jack',
iconCls:'user',
leaf:true
},{
text:'Brian',
iconCls:'user',
leaf:true
},{
text:'Jon',
iconCls:'user',
leaf:true
},{
text:'Tim',
iconCls:'user',
leaf:true
},{
text:'Nige',
iconCls:'user',
leaf:true
},{
text:'Fred',
iconCls:'user',
leaf:true
},{
text:'Bob',
iconCls:'user',
leaf:true
}]
},{
text:'Family',
expanded:true,
children:[{
text:'Kelly',
iconCls:'user-girl',
leaf:true
},{
text:'Sara',
iconCls:'user-girl',
leaf:true
},{
text:'Zack',
iconCls:'user-kid',
leaf:true
},{
text:'John',
iconCls:'user-kid',
leaf:true
}]
}]
})
}), {
title: 'Settings',
html:'<p>Something useful would be in here.</p>',
autoScroll:true
},{
title: 'Even More Stuff',
html : '<p>Something useful would be in here.</p>'
},{
title: 'My Stuff',
html : '<p>Something useful would be in here.</p>'
}
]
});
}
win.show();
}
});
// for example purposes
var windowIndex = 0;
MyDesktop.BogusModule = Ext.extend(Ext.app.Module, {
init : function(){
this.launcher = {
text: 'Window '+(++windowIndex),
iconCls:'bogus',
handler : this.createWindow,
scope: this,
windowId:windowIndex
}
},
createWindow : function(src){
var desktop = this.app.getDesktop();
var win = desktop.getWindow('bogus'+src.windowId);
if(!win){
win = desktop.createWindow({
id: 'bogus'+src.windowId,
title:src.text,
width:640,
height:480,
html : '<p>Something useful would be in here.</p>',
iconCls: 'bogus',
shim:false,
animCollapse:false,
constrainHeader:true
});
}
win.show();
}
});
MyDesktop.BogusMenuModule = Ext.extend(MyDesktop.BogusModule, {
init : function(){
this.launcher = {
text: 'Bogus Submenu',
iconCls: 'bogus',
handler: function() {
return false;
},
menu: {
items:[{
text: 'Bogus Window '+(++windowIndex),
iconCls:'bogus',
handler : this.createWindow,
scope: this,
windowId: windowIndex
},{
text: 'Bogus Window '+(++windowIndex),
iconCls:'bogus',
handler : this.createWindow,
scope: this,
windowId: windowIndex
},{
text: 'Bogus Window '+(++windowIndex),
iconCls:'bogus',
handler : this.createWindow,
scope: this,
windowId: windowIndex
},{
text: 'Bogus Window '+(++windowIndex),
iconCls:'bogus',
handler : this.createWindow,
scope: this,
windowId: windowIndex
},{
text: 'Bogus Window '+(++windowIndex),
iconCls:'bogus',
handler : this.createWindow,
scope: this,
windowId: windowIndex
}]
}
}
}
});
// Array data for the grid
Ext.grid.dummyData = [
['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am'],
['Walt Disney Company (The) (Holding Company)',29.89,0.24,0.81,'9/1 12:00am']
];
私聊博主获取全部代码图片文件
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
