http://qwikioffice.com/desktop-demo/
http://gsylvain35.free.fr/desktop/
http://extforumdemo.altervista.org/
http://cobnet.com/icmsBeta2/extjs/ex...top/login.html
首先为了浏览器兼容问题 可以把网页头的文档类型定义<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">去掉。
第一步当然是导入js和css，官方的例子是这样导入的
HTML语言:
<link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="css/desktop.css" />
<script type="text/javascript" src="http://www.cnblogs.com/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="http://www.cnblogs.com/ext-all-debug.js"></script>
<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><!-例子代码，以后会在这个文件的基础上扩展->
页面的body里就放一下代码
HTML语言:
<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"><!-这个id和后台命名对应->
<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>
简单看看sample.js里面有什么
JavaScript语言:
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()
];
},
// 开始菜单的配置，把Start 改成开始 要修改TaskBar.js的内容
getStartConfig : function(){
return {
//开始菜单的标题
title: 'Jack Slocum',
//标题前的图片样式
iconCls: 'user',
//开始菜单侧边的一些配置，结合例子自己看可以加handler指定相关方法
toolItems: [{
text:'Settings',
iconCls:'settings',
scope:this
},'-',{
text:'Logout',
iconCls:'logout',
scope:this
}]
};
}
});
MyDesktop.GridWindow = Ext.extend(Ext.app.Module, {
//body中指定的id编号
id:'grid-win',
init : function(){
this.launcher = {
//窗体的名称
text: 'Grid Window',
//窗体的图片样式
iconCls:'icon-grid',
//创建窗体的方法，
handler : this.createWindow,
scope: this
}
},
createWindow : function(){
//获得desktop对象
var desktop = this.app.getDesktop();
//获得名称为grid-win的窗体
var win = desktop.getWindow('grid-win');
if(!win){//窗体为空，既没有这个窗体就创建它
//一下就是窗体配置，自己研究一下
win = desktop.createWindow({
id: 'grid-win',
title:'Grid Window',
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", 120, sortable: true, dataIndex: 'company'},
{header: "Price", 70, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
{header: "Change", 70, sortable: true, dataIndex: 'change'},
{header: "% Change", 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();//显示窗体
}
});
//其他就是创建不同格式的窗体