带拖拽的Extjs的desktop实现
来源：互联网 发布：《c语言从入门到放弃》 编辑：程序博客网 时间：2024/05/16 15:18
由于大部分是延用的extjs已有的程序，所以直接粘贴页面代码，之后再做进一步功能上的完善
首先是看下效果图
<link rel="stylesheet" type="text/css" href="/extjs/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="/extjs/examples/desktop/css/desktop.css" />
<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="/extjs/adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->
<script type="text/javascript" src="/extjs/ext-all-debug.js"></script>
<!-- DESKTOP -->
<script type="text/javascript" src="/extjs/examples/desktop/js/StartMenu.js"></script>
<script type="text/javascript" src="/extjs/examples/desktop/js/TaskBar.js"></script>
<script type="text/javascript" src="/extjs/examples/desktop/js/Desktop.js"></script>
<script type="text/javascript" src="/extjs/examples/desktop/js/App.js"></script>
<script type="text/javascript" src="/extjs/examples/desktop/js/Module.js"></script>
<script type="text/javascript" src="/js/sample.js" charset="gb2312"></script>
<style type="text/css">
body
{
font-size: 12px;
margin: 10px;
}
.block
{
border: 1px red solid;
height: 380px;
margin-top: 50px;
padding: 20px 0 0 20px;
clear: both;
}
.item
{
border: 1px #000 solid;
margin-right: 10px;
width: 60px;
height: 40px;
text-align: center;
padding-top: 20px;
color: White;
float: left;
cursor: pointer;
}
</style>
<script type="text/javascript">
Ext.onReady(function() {
var proxy_file = new Ext.dd.DragSource('grid-win-shortcut', { group: 'image' });
var proxy_user = new Ext.dd.DragSource('acc-win-shortcut', { group: 'image' });
//拖动完成的事件
proxy_file.afterDragDrop = function(target, e, id) {
var destEl = Ext.get(id);
var srcEl = Ext.get(this.getEl());
var sColor = srcEl.dom.id.split('_')[1]; //得取拖动源id的后面一部分，即proxy_red后面的red
destEl.dom.style.backgroundColor = sColor; //设置目标id的背景色
};
proxy_user.afterDragDrop = proxy_file.afterDragDrop; //为其它拖动源赋值同样的事件处理函数
});
</script>
</head>
<body scroll="no">
<form id="form1" runat="server">
<div id="x-desktop">
<dl id="x-shortcuts">
<dt id="grid-win-shortcut">
<img src="/ICO/fileManage.gif" />
<div>
文件管理</div>
</dt>
<dt id="acc-win-shortcut">
<img src="/ICO/USER.GIF" />
<div>
用户管理</div>
</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>
*********************************
simple.js
/*!
* Ext JS Library 3.2.0
* Copyright(c) 2006-2010 Ext JS, Inc.
* licensing@extjs.com
* http://www.extjs.com/license
*/
// Sample desktop configuration
MyDesktop = new Ext.app.App({
init: function() {
Ext.QuickTips.init();
},
getModules: function() {
return [
new MyDesktop.UserManage(),
new MyDesktop.FileManage()
];
},
// config for the start menu
getStartConfig: function() {
return {
title: '快捷菜单',
icon: 'user',
toolItems: [{
text: '控制面板',
iconCls: 'settings', //图片样式
scope: this
}, '-', {
text: '管理网站',
iconCls: 'logout',
scope: this
}]
};
}
});
/*
* Example windows
*/
MyDesktop.UserManage = Ext.extend(Ext.app.Module, {
id: 'acc-win',
init: function() {
this.launcher = {
text: '用户管理',
iconCls: 'icon-grid',
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: '用户管理',
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.FileManage = Ext.extend(Ext.app.Module, {
id: 'grid-win',
init: function() {
this.launcher = {
text: '文件管理',
iconCls: 'tabs',
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: '文件管理',
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();
}
});
// 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']
];
- 带拖拽的Extjs的desktop实现
- 有关EXTJS desktop的文章
- ExtJS DeskTop组件的学习
- 一点摸索extjs的Desktop
- Extjs desktop类桌面系统的开发
- ExtJS[Desktop]实现 图标换行
- 一些基于ExtJS的Desktop特效应用的网站
- ExtJs:Desktop的Window层叠遮罩问题
- ExtJs Desktop
- ExtJS Desktop
- ExtJs 表格的实现
- EXTJs 树的实现
- EXTJs 树的实现
- 我在Extjs中例子desktop中StartMenu.js的注释
- 基于ExtJs的desktop桌面化框架。(仿京东后台管理系统)
- 我的第一个extjs desktop + jsp +mysql实战练习项目
- 实现extjs的Dynamic Grid
- EXTJS动态树的实现
- 啊啊
- Linux重要命令行摘记_编译与调试篇
- GRE经验贴
- 《算法导论》笔记－－霍夫曼（Huffman）树构造
- C/C++中宏使用总结
- 带拖拽的Extjs的desktop实现
- UML类图关系大全
- 查看端口开通三法
- 交通灯管理系统分析（张孝祥老师）
- JavaBean 属性命名规范特例
- So, IT workers, what is the most disgusting work area you had to work on.
- 实例与举一反三之比较（四）
- USB相关的芯片
- 时间函数
