最近在学习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.
* [email protected]
* 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所欲文件有点大无法上传， 如果有需要还是留言吧或者有微博的朋友可以加我为好友，因为微博一直在线， 可以回复的及时一些吧，微博昵称：临时工介绍所