最近在学习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的OA项目 extjs-OA extjs-oaextjs-OA extjs-oa
extjs-620-docs官方文档extjs-620-docs官方文档extjs-620-docs官方文档
extjs-theme-bootstrap-master.zip
extjs-basex.js extjs-basex.js extjs-basex.js
extjs-6.2.0完全离线版本API文档,原本的离线包还是会去请求谷歌的部分js资源和字体资源,导致速度很慢,这个不会了
extjs-4.2.1的基础包.rar,方便自己用.
extjs-basex.js extjs-basex.js extjs-basex.js
extJs-5.0.1-gpl附带sencha cmd安装程序、ruby编译包(分为32位和64位)和教程,一共四部分
extjs-4.1.1 ExtJs所有文档及库文件,在官网下的,这个版本很好,放在这方便大家下载!
ExtJS----HelloWorld程序源码
extjs--创建图表 折线图、饼状图、柱状图
extjs-core 3.0 beta版extjs-core 3.0 beta版SDK extjs-core 3.0 beta版extjs-core 3.0 beta版
extjs-6.5.3离线API文档,是学习和开发的必要工具。希望有所帮助!
ExtJS是一种主要用于创建前端用户界面,是一个基本与后台技术无关的前端ajax框架。功能丰富,无人能出其右。无论是界面之美,还是功能之强,ext的表格控件都高居榜首。单选行,多选行,高亮显示选中的行,推拽改变列...
Ext JS 6最大的变化就是将Ext JS和Touch合并为一个单一的框架。之前的框架的核心(数据、控制器、模型等等)已被调和为一个...那些共享核心资源和逻辑,并使用这两种工具包的应用程序被称为通用(Universal)应用程序。
extjs-7.0.0-gpl
Ext JS 4.2.6.1811 Release Date: October 5, 2016 Version Number: 4.2.6.1811 ext-src class 926
Ext JS 6最大的变化就是将Ext JS和Touch合并为一个单一的框架。之前的框架的核心(数据、控制器、模型等等)已被调和为一个...那些共享核心资源和逻辑,并使用这两种工具包的应用程序被称为通用(Universal)应用程序。
ExtJS是一种主要用于创建前端用户界面,是一个基本与后台技术无关的前端ajax框架。序言 功能丰富,无人能出其右。 无论是界面之美,还是功能之强,ext的表格控件都高居榜首
extjs-4.1.1官方完整包!包含智能提示功能。