最近在学习Extjs，感觉到了extjs的强大，尤其是看了它的desktop之后，ext的desktop做的确实不错，在网上找了一下extjs的desktop的资料，并没有太多完整的实例有的话想下载很麻烦，于是决定自己整一个，说干就干，我的desktop是SSH+Extjs 4实现
总体架构就是大家看到的截图，至于SSH框架的大家就不在这里赘述了，接下来介绍每个包的作用：
core包中存放desktop的核心代码：
css包用于存放样式：
ext包用于存放js：
images用于存放desktop中的图片，在extjs的desktop的例子中可以找到images包
modules中用于存放桌面上显示的模块：
接下来就是把App.js 和setting.js以及desktop.html考到WebContent的目录下
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>extjs4 desktop</title>
<!-- css -->
<link rel="stylesheet" type="text/css" href="extjslib/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="extjslib/css/desktop.css" />
<!-- base js -->
<script type="text/javascript" src="extjslib/ext/ext-all.js"></script>
<!-- <script type="text/javascript" src="extjslib/ext/ext-lang-zh_CN.js"></script> -->
<!-- core js -->
<script type="text/javascript" src="extjslib/core/Module.js"></script>
<script type="text/javascript" src="extjslib/core/Video.js"></script>
<script type="text/javascript" src="extjslib/core/Wallpaper.js"></script>
<script type="text/javascript" src="extjslib/core/FitAllLayout.js"></script>
<script type="text/javascript" src="extjslib/core/StartMenu.js"></script>
<script type="text/javascript" src="extjslib/core/TaskBar.js"></script>
<script type="text/javascript" src="extjslib/core/ShortcutModel.js"></script>
<script type="text/javascript" src="extjslib/core/Desktop.js"></script>
<script type="text/javascript" src="extjslib/core/App.js"></script>
<!-- module js -->
<script type="text/javascript" src="modules/WallpaperModel.js"></script>
<script type="text/javascript" src="modules/VideoWindow.js"></script>
<script type="text/javascript" src="modules/BogusModule.js"></script>
<script type="text/javascript" src="modules/BogusMenuModule.js"></script>
<script type="text/javascript" src="modules/TabWindow.js"></script>
<script type="text/javascript" src="modules/GridWindow.js"></script>
<script type="text/javascript" src="modules/AccordionWindow.js"></script>
<script type="text/javascript" src="modules/SystemStatus.js"></script>
<script type="text/javascript" src="modules/Notepad.js"></script>
<script type="text/javascript" src="modules/UserManager.js"></script>
<!-- config js -->
<script type="text/javascript" src="Settings.js"></script>
<script type="text/javascript" src="App.js"></script>
<script type="text/javascript">
Ext.Loader.setConfig({enabled:true});
Ext.Loader.setPath({
'Ext.ux.desktop': 'extjslib',
//'Fly.modules': 'modules',
MyDesktop: ''
});
Ext.require('MyDesktop.App');
var myDesktopApp;
Ext.override(Ext.ZIndexManager, {
tempHidden: [],
show: function() {
var comp, x, y;
while (comp = this.tempHidden.shift()) {
x = comp.x;
y = comp.y;
comp.show();
comp.setPosition(x, y);
}
}
});
Ext.onReady(function () {
myDesktopApp = new MyDesktop.App();
});
</script>
</head>
<body>
</body>
</html>
先看下效果：
自己扩展的用户模块：
/*!
* Ext JS Library 4.0
* Copyright(c) 2006-2011 Sencha Inc.
* licensing@sencha.com
* http://www.sencha.com/license
*/
Ext.define('MyDesktop.UserManager', {
extend: 'Ext.ux.desktop.Module',
requires: [
'Ext.data.JsonStore',
'Ext.util.Format',
'Ext.grid.Panel',
'Ext.grid.RowNumberer'
],
id:'users-grid',
init : function(){
this.launcher = {
text: 'User Manager',
iconCls:'user',
handler : this.createWindow,
scope: this
};
},
createWindow : function(){
var desktop = this.app.getDesktop();
var win = desktop.getWindow(this.id);
var required = '<span style="color:red;font-weight:bold" data-qtip="Required">* </span>';
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [{
name: 'id',
},{
name: 'userName'
},{
name: 'password'
},{
name: 'status'
},{
name: 'createTime'
},{
name: 'roleName',
}]
});
var userStore=Ext.create('Ext.data.Store',{
//autoDestroy: true,
autoLoad:true,
model: 'User',
proxy: {
actionMethods:{
create: "POST",
read: "POST",
update: "POST",
destroy: "POST"
},
type: 'ajax',
api: {
create : '',
read : 'userAction!list.action',
update : '',
destroy : ''
},
reader: {
type: 'json',
root: 'rows'
}
}
});
//创建数据模型
Ext.regModel('role',{
fields:[{name:'id'},{name:'roleName'}]
});
//定义组合框中显示的数据源
var roleStore = Ext.create('Ext.data.Store',{
model:'role',
proxy:{
type:'ajax',
url:'roleAction!list.action',
reader: {
type: 'json',
root: 'rows'
}
}
});
if(!win){
var userid;
var usergrid = Ext.create('Ext.grid.Panel',{
flex:2,
frame: true,
title:'User Info',
store:userStore,
layout: 'column',
columns: [
new Ext.grid.RowNumberer(),
{
text: "ID",
flex: 70,
sortable: true,
dataIndex: 'id'
},
{
text: "User Name",
width: 70,
sortable: true,
dataIndex: 'userName'
},
{
text: "Password",
width: 70,
sortable: true,
dataIndex: 'password'
},
{
text: "Status",
width: 70,
sortable: true,
dataIndex: 'status'
},
{
text: "CreateTime",
width: 70,
sortable: true,
dataIndex: 'createTime'
},
{
text: "Role Name",
width: 70,
sortable: true,
dataIndex: 'roleName'
}
],
listeners: {
selectionchange: function(model, records) {
if (records[0]) {
userid = records[0].data.id;
Ext.getCmp('userForm').loadRecord(records[0]);
//Ext.getCmp('roleNames').setValue(records[0].data.roleName);
Ext.getCmp('user_save').setDisabled(false);
Ext.getCmp('userForm').remove('roleNames');
Ext.getCmp('user_update').setDisabled(false);
Ext.getCmp('user_save').setText('Add');
}
}
}
});
var userform = new Ext.form.Panel({
flex:1,
title:'Edit User',
xtype: 'form',
frame: true,
id: 'userForm',
bodyPadding: 10,
layout:'anchor',
fieldDefaults: {
labelStyle:'font-weight: bold;text-align:right',
labelWidth: 70
},
defaultType: 'textfield',
items: [{
id:'id',
name: 'id',
inputType:'hidden'
},{
id:'user-name',
fieldLabel: 'User Name',
beforeLabelTextTpl: required,
name: 'userName',
allowBlank:false,
enableKeyEvents: true
},{
id:'status',
fieldLabel: 'Status',
name: 'status'
},{
id:'password',
fieldLabel: 'Password',
beforeLabelTextTpl: required,
name: 'password',
blankText : 'The password cannot be blank',
regex : /^[\s\S]{6,32}$/,
regexText : 'Password length must be greater than 6 and less than 32',
inputType : 'password',
allowBlank:false
},{
id:'roleName',
fieldLabel: 'Role Name',
name: 'roleName'
}],
buttons: [{
id:'user_save',
text: 'Add',
maxWidth:55,
handler:function(){
var user_form = this.up('form');
if(this.getText() == 'Add'){
user_form.add(
{
id:'roleNames',
name:'roleName',
store:roleStore,
fieldLabel: 'Role Name',
xtype:'combobox',
displayField:'roleName',//定义要显示的字段
valueField:'id',
queryMode:'remote',//远程模式
allQuery:'allArea',
minChars:1,//下拉框自动选择前用户需要输入的最小字符数量
queryDelay:300,//查询延迟时间（毫秒）
triggerAction:'all',//单击按钮显示全部数据
forceSelection:true,//要求输入值必须在列表中存在
typeAhead:true,//允许自动选择匹配的剩余部分文本
value:'1'//默认值
}
);
roleStore.load();
user_form.getForm().reset();
Ext.getCmp('user_update').setDisabled(true);
this.setText('Save');
user_form.remove('roleName');
}else{
if(user_form.getForm().isValid()){
user_form.getForm().submit({
url: 'userAction!addUser.action',
submitEmptyText: false,
waitTitle:'Please wait',
waitMsg: 'The user is added...',
params : {
"user.userName":Ext.getCmp('user-name').getValue(),
"user.password":Ext.getCmp('password').getValue(),
"user.status":Ext.getCmp('status').getValue(),
"role.id":Ext.getCmp('roleNames').getValue()
},
success:function(form,action){
var response = Ext.decode(action.response.responseText);
Ext.Msg.alert('tip', response.msg);
userStore.load();
},
failure:function(form,action){
Ext.Msg.alert('tip', 'Failed to add the users!');
}
});
}else{
Ext.Msg.alert('tip', 'Data validation failures!');
}
this.setText('Add');
Ext.getCmp('userForm').remove('roleNames');
Ext.getCmp('user_update').setDisabled(false);
}
}
},{
id:'user_update',
text: 'Edit',
maxWidth:55,
handler:function(){
var user_form = this.up('form');
if(this.getText() == 'Edit'){
user_form.add(
{
id:'roleNames',
name:'roleName',
store:roleStore,
fieldLabel: 'Role Name',
xtype:'combobox',
displayField:'roleName',//定义要显示的字段
valueField:'id',
queryMode:'remote',//远程模式
allQuery:'allArea',
minChars:1,//下拉框自动选择前用户需要输入的最小字符数量
queryDelay:300,//查询延迟时间（毫秒）
triggerAction:'all',//单击按钮显示全部数据
forceSelection:true,//要求输入值必须在列表中存在
typeAhead:true,//允许自动选择匹配的剩余部分文本
value:'1'//默认值
}
);
roleStore.load();
Ext.getCmp('user_save').setDisabled(true);
this.setText('Save');
user_form.remove('roleName');
}else{
if(user_form.getForm().isValid()){
user_form.getForm().submit({
url: 'userAction!editUser.action',
submitEmptyText: false,
waitTitle:'Please wait',
waitMsg: 'The user is editing...',
params : {
"user.userName":Ext.getCmp('user-name').getValue(),
"user.password":Ext.getCmp('password').getValue(),
"user.status":Ext.getCmp('status').getValue(),
"role.id":Ext.getCmp('roleNames').getValue(),
"user.id" : Ext.getCmp('id').getValue()
},
success:function(form,action){
var response = Ext.decode(action.response.responseText);
Ext.Msg.alert('tip', response.msg);
userStore.load();
},
failure:function(form,action){
Ext.Msg.alert('tip', 'Edit user failure!');
}
});
}else{
Ext.Msg.alert('tip', 'Data validation failures!');
}
this.setText('Edit');
Ext.getCmp('userForm').remove('roleNames');
Ext.getCmp('user_save').setDisabled(false);
}
}
},{
text: 'Cancel',
maxWidth:30,
handler: function() {
this.up('form').getForm().reset();
}
}]
});
win = desktop.createWindow({
id: 'users-grid',
title:'User Mamage',
width:780,
height:480,
iconCls: 'icon-grid',
layout: {
type: 'hbox',
align: 'stretch',
defaultMargins:{
top: 1,
right: 1,
bottom: 1,
left: 1
},
padding:0
},
items: [
usergrid,
userform
]
});
}
win.show();
return win;
}
});
目前desktop的例子就自己扩展了一个用户模块，最近由于时间紧，还没有进行下一步扩展， 不过对于学习还是可以参考的了， 由于是集成SSH所欲文件有点大无法上传， 如果有需要还是留言吧或者有微博的朋友可以加我为好友，因为微博一直在线， 可以回复的及时一些吧，微博昵称：临时工介绍所
相关推荐
在本项目中，"ExtJS桌面化(desktop)插件Demo项目"展示了如何利用ExtJS的桌面化功能创建一个类似于传统桌面应用的用户界面。这个Demo项目的核心在于对"desktop"插件的定制和应用，该插件提供了构建桌面样式的应用程序...
ExtJS 4.2 Desktop 拓展是一个用于构建桌面样式的Web应用程序的框架，它提供了丰富的用户界面组件和交互效果。这个拓展是基于ExtJS 4.2版本，一个非常强大的JavaScript库，用于创建数据驱动、富客户端的Web应用。在...
标题 "DeskTop-ExtJs4 demo" 暗示我们正在探讨一个使用ExtJs 4框架构建的桌面式应用程序的示例项目。ExtJs是一个强大的JavaScript库，用于开发富客户端Web应用，它提供了丰富的组件和布局管理，使得构建复杂的用户...
EXTJS 4.2 Desktop MVC 是一个基于EXTJS 4.2版本的桌面应用程序框架，它结合了MVC（Model-View-Controller）设计模式，为开发者提供了构建富客户端桌面应用的强大工具。EXTJS是一个流行的JavaScript库，专门用于创建...
在Ext-Desktop应用中，Java可以作为数据接口，通过RESTful API向前端提供数据，实现前后端分离的开发模式。 压缩包内的文件提供了关于Ext-Desktop和ExtJS的资源和学习材料： 1. `Ext+3.0+中文API.CHM`：这是ExtJS ...
ExtJS 4 Desktop 是一个基于 Sencha ExtJS 4 框架的桌面应用程序模拟器。这个框架允许开发者创建类似桌面应用的用户界面，提供多窗口、任务栏、快捷方式等特性，使得Web应用看起来和操作起来更像是本地桌面应用。在...
1. **ExtJS Desktop**：这是一种高级的布局模式，模拟了传统的桌面操作系统界面，包括任务栏、桌面图标、启动菜单等元素。在个人/家庭收支系统中，桌面环境提供了一个直观的界面，让用户可以轻松访问不同的功能模块...
2. **Desktop组件**：Desktop应用通常由多个关键组件组成，如DeskTop本身、工作区（Workspace）、快捷方式（Shortcut）、启动器（Launcher）、任务栏（Taskbar）等。这些组件的实现涉及了ExtJS的事件处理、布局管理...
总的来说，EXTJS DeskTop权限管理是一种强大的工具，它允许开发者构建安全、灵活且用户友好的Web应用。通过精心设计的权限系统，可以确保每个用户都能获得符合其角色的定制化界面，同时避免了敏感信息的不当暴露。在...
这个"webdesktop1.0"压缩包包含了一个基于ExtJS4实现的Web桌面小实例，旨在帮助开发者了解如何利用ExtJS4构建类似桌面环境的Web应用。 在ExtJS4中，Web桌面通常指的是一个模仿传统桌面操作系统界面的Web应用框架，...
标题中的“ExtJS Desktop相关 动态生成开始菜单 多级菜单的快捷方式”涉及到的是一个使用ExtJS框架实现的桌面应用模拟系统，它能够创建类似Windows操作系统的开始菜单，并支持多级菜单结构来快速访问应用程序或功能...
EXTJS桌面国际化的实现涉及到多个方面的知识，EXTJS是一个基于JavaScript的富客户端框架，用于构建交互式的Web应用程序。国际化（Internationalization，简称i18n）则是让软件能够支持多种语言和地区的功能，使得...
EXT-desktop 是一个基于 ExtJS 的桌面应用程序框架，它允许开发者创建具有类似桌面应用风格的Web应用，提供丰富的用户界面和交互体验。Struts2 是一个非常流行的 Java Web 框架，用于构建 MVC（Model-View-...
ExtJS Desktop是一种高级JavaScript框架，它允许开发者将Web应用程序模拟成桌面应用程序的界面和交互体验。结合Java后端服务，我们可以构建出功能强大且用户友好的财务管理工具。 首先，ExtJS Desktop提供了一个...
ExtJS 4.2 Desktop 是一个基于 ExtJS 4.2 框架构建的桌面应用模拟能力的解决方案。这个压缩包包含了该框架的一个轻量级版本，经过优化，仅保留了四种主题，以减小文件体积，便于快速开发和部署。它将原本庞大的库...
在深入探讨如何在ExtJS 4.0框架中实现Desktop桌面图标自动换行的功能之前，我们首先需要了解ExtJS框架的基本概念以及Desktop组件的作用。ExtJS是一个基于JavaScript的开源前端框架，它提供了一系列丰富的UI组件，使...
标题“ext-desktop”可能指的是EXTJS的一个桌面应用项目，EXTJS是一个流行的JavaScript库，用于构建富客户端Web应用程序。EXTJS提供了丰富的组件库，包括数据绑定、图表、表格、窗体等，使得开发者能够构建功能强大...
在本项目"spring-struts-hibernate-maven-ExtjsDesktop"中，我们探索了一个使用前沿技术构建的桌面化应用程序。这个应用集成了Spring、Struts、Hibernate和Maven框架，并利用了Ext JS库来实现用户界面的桌面化体验。...
### 免费Extjs 4.0教程视频知识点概览 #### 第一讲：Extjs 4.0概述与Hello World程序...以上内容覆盖了Extjs 4.0的基础知识到高级组件的应用，通过这些教程的学习，开发者能够全面掌握Extjs 4.0的核心技术和最佳实践。
EXTJS是一种基于JavaScript的富客户端应用开发框架，由Sencha公司开发。它提供了一套完整的组件模型、数据绑定机制、事件处理系统以及丰富的用户界面组件，使得开发者可以构建功能强大的Web应用程序，甚至可以创建出...