在extjs4的desktop例子中添加自己的东西

最新推荐文章于 2026-02-06 05:14:01 发布
原创 最新推荐文章于 2026-02-06 05:14:01 发布 · 2.1k 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文详细介绍了如何在ExtJS框架下创建一个桌面应用，包括模块的定义、窗口的创建、用户界面的设计以及数据存储与操作。通过实例展示了如何实现用户管理功能，包括用户列表展示、添加、编辑和删除操作。

版本4.0


1、在desktop目录下

新建一个Users.js文件

输入代码

/*!
 * Ext JS Library 4.0
 * Copyright(c) 2006-2011 Sencha Inc.
 * licensing@sencha.com
 * http://www.sencha.com/license
 */

Ext.define('MyDesktop.Users', {
    extend: 'Ext.ux.desktop.Module',

    requires: [
    'Ext.data.JsonStore',
    'Ext.util.Format',
    'Ext.grid.Panel',
    'Ext.grid.RowNumberer'
    ],

    id:'users',

    init : function(){
        this.launcher = {
            text: '用户管理',
            iconCls:'icon-grid'
        };
    },
    

    createWindow : function(){
        var desktop = this.app.getDesktop();
        var win = desktop.getWindow('users-grid');
        var required = '<span style="color:red;font-weight:bold" data-qtip="Required">* </span>';
        
        Ext.define('Fly.model.User', {
            extend: 'Ext.data.Model',
            fields: [{
                name: 'id',
                type:'int'
            },{
                name: 'userName',
                type:'string'
            },{
                name: 'userPasswd',
                type:'password'
            },{
                name: 'userPermiss'
            },{
                name: 'description',
                type:'string'
            },{
                name: 'logintimes',
                type:'int'
            }]
        });
        
        var userStore = Ext.create('Ext.data.Store', {
            autoLoad: true,
            autoDestroy: true,
            storeId: 'userStore',
            model:'Fly.model.User',
            proxy: {
                actionMethods:{
                    create: "POST", 
                    read: "POST", 
                    update: "POST", 
                    destroy: "POST"
                },
                type: 'ajax',
                api: {
                    create  : 'user/adduser.shtml',
                    read    : 'user/userslist.shtml',
                    update  : 'user/updateuser.shtml',
                    destroy : 'user/delete.shtml'
                },
                reader: {
                    type: 'json',
                    root: 'rows',
                    idProperty: 'id'
                }
            }
        });
        //下拉框数据。 
        var cbstore = Ext.create('Ext.data.ArrayStore', {
            autoDestroy : true,
            fields: ['id', 'name'],
            data : [[0,"管理员"],[1,"操作员"],[2,"浏览员"]]
        });
        
        Ext.apply(Ext.form.VTypes, {
            confirmPwd : function(val, field) {
                if (field.confirmPwd) {
                    var firstPwdId = field.confirmPwd.first;
                    var secondPwdId = field.confirmPwd.second;
                    this.firstField = Ext.getCmp(firstPwdId);
                    this.secondField = Ext.getCmp(secondPwdId);
                    var firstPwd = this.firstField.getValue();
                    var secondPwd = this.secondField.getValue();
                    if (firstPwd == secondPwd) {
                        return true;
                    } else {
                        return false;
                    }
                }
            },
            confirmPwdText : '两次输入的密码不一致!'
        });
        
        if(!win){
            var userid;
            var usergrid = Ext.create('Ext.grid.Panel',{
                flex:2,
                frame: true,
                title:'用户列表',
                store: userStore,
                layout: 'column',
                columns: [
                new Ext.grid.RowNumberer(),
                {
                    text: "ID",
                    flex: 1,
                    dataIndex: 'id'
                },{
                    text: "用户名",
                    flex: 2,
                    dataIndex: 'userName'
                },{
                    text: "权限",
                    flex: 1,
                    dataIndex: 'userPermiss',
                    renderer:function(v){
                        if (v == 0) return "管理员";
                        if (v == 1) return "操作员";
                        if (v == 2) return "浏览员";
                    }
                },{
                    text: "描述",
                    flex: 3,
                    dataIndex: 'description'
                },{
                    text: "登陆次数",
                    flex: 1,
                    dataIndex: 'logintimes'
                }],
                listeners: {
                    selectionchange: function(model, records) {
                        if (records[0]) {
                            userid = records[0].data.id;
                            Ext.getCmp('userForm').loadRecord(records[0]);
                            Ext.getCmp('user_save').setDisabled(false);
                            Ext.getCmp('userForm').remove('reUserPasswd');
                            Ext.getCmp('user_update').setDisabled(false);
                            Ext.getCmp('user_delete').setDisabled(false);
                            Ext.getCmp('user_save').setText('增加');
                        }
                    }
                }
            });
            
            var userform =  Ext.widget({
                flex:1,
                title:'用户编辑',
                xtype: 'form',
                frame: true,
                id: 'userForm',
                bodyPadding: 10,
                layout:'anchor',
                fieldDefaults: {
                    labelStyle:'font-weight: bold;text-align:right',
                    labelWidth: 70
                },
                defaultType: 'textfield',
                items: [{
                    id:'user-name',
                    fieldLabel: '用户名',
                    beforeLabelTextTpl: required,
                    name: 'userName',
                    allowBlank:false,
                    enableKeyEvents: true,                
                    listeners:{
                        //事件监听，当用户离开输入框——失去焦点时执行
                        'blur':function(){
                            Ext.Ajax.request({
                                url:'checkname.shtml?loginName='+Ext.getCmp('user-name').getValue(),
                                method:'post',
                                success: function(response,opts){
                                    var respText=Ext.decode(response.responseText);
                                    if(respText.success == true){
                                        //根据ajax请求返回的数据信息手动的进行设置该字段无效
                                        Ext.getCmp('user-name').markInvalid('该用户名已被使用');
                                    }
                                }
                            });  
                        }               
                    }
                },{
                    fieldLabel: '类型',
                    beforeLabelTextTpl: required,
                    xtype: 'combobox',
                    store: cbstore,
                    displayField: 'name',
                    valueField: 'id',
                    name: 'userPermiss',
                    forceSelection:true,
                    allowBlank:false
                },{
                    fieldLabel: '描述',
                    name: 'description',
                    xtype:'textarea'
                },{
                    id:'password',
                    fieldLabel: '密码',
                    beforeLabelTextTpl: required,
                    name: 'userPasswd',
                    blankText : '密码不能为空',
                    regex : /^[\s\S]{6,32}$/,
                    regexText : '密码长度必须大于6小于32',
                    inputType : 'password',
                    allowBlank:false
                }],

                buttons: [{
                    id:'user_save',
                    text: '增加',
                    maxWidth:55,
                    handler:function(){
                        var user_form = this.up('form');
                        if(this.getText() == '增加'){
                            if(!Ext.get('reUserPasswd')){
                                user_form.add({
                                    id:'reUserPasswd',
                                    name:'reUserPasswd',
                                    fieldLabel: '确认密码',
                                    beforeLabelTextTpl: required,
                                    confirmPwd : {
                                        first : 'password',
                                        second : 'reUserPasswd'
                                    },
                                    inputType : 'password',
                                    vtype : 'confirmPwd',
                                    regex : /^[\s\S]{6,32}$/,
                                    regexText : '密码长度必须大于6小于32',
                                    allowBlank:false
                                })
                            }
                            user_form.getForm().reset();
                            Ext.getCmp('user_update').setDisabled(true);
                            Ext.getCmp('user_delete').setDisabled(true);
                            this.setText('保存');
                        }else{
                            if(user_form.getForm().isValid()){
                                user_form.getForm().submit({
                                    url: 'user/adduser.shtml',
                                    submitEmptyText: false,
                                    waitTitle:'请等待',
                                    waitMsg: '正在添加用户...',
                                    success:function(form,action){
                                        var response = Ext.decode(action.response.responseText);
                                        Ext.Msg.alert('提示', response.msg);
                                        userStore.load();
                                    },
                                    failure:function(form,action){
                                        Ext.Msg.alert('提示', '添加用户失败！');
                                    }
                                });
                            }else{
                                Ext.Msg.alert('提示', '数据验证失败！');
                            }
                            this.setText('增加');
                            Ext.getCmp('userForm').remove('reUserPasswd');
                            Ext.getCmp('user_update').setDisabled(false);
                            Ext.getCmp('user_delete').setDisabled(false);
                        }
                    }
                },{
                    id:'user_update',
                    text: '编辑',
                    maxWidth:55,
                    handler:function(){
                        var user_form = this.up('form');
                        if(user_form.getForm().isValid()){
                            user_form.getForm().submit({
                                url: 'user/updateuser.shtml',
                                submitEmptyText: false,
                                waitTitle:'请等待',
                                waitMsg: '正在编辑用户...',
                                params : {
                                    id : userid
                                },
                                success:function(form,action){
                                    var response = Ext.decode(action.response.responseText);
                                    Ext.Msg.alert('提示', response.msg);
                                    userStore.load();
                                },
                                failure:function(form,action){
                                    Ext.Msg.alert('提示', '编辑用户失败！');
                                }
                            });
                        }else{
                            Ext.Msg.alert('提示', '数据验证失败！');
                        }
                    }
                },{
                    id:'user_delete',
                    text: '删除',
                    maxWidth:55,
                    handler: function() {
                        Ext.Ajax.request({
                            url:'user/delete.shtml?ids='+userid,
                            method:'post',
                            waitTitle:'请等待',
                            waitMsg: '正在删除用户...',
                            params : {
                                id : userid
                            },
                            success:function(response,opts){
                                var respText=Ext.decode(response.responseText);
                                if(respText.success == true){
                                    Ext.Msg.alert('提示', respText.msg);
                                    userStore.load();
                                }
                            },
                            failure:function(form,action){
                                Ext.Msg.alert('提示', '删除用户失败！');
                            }
                        }); 
                    }
                },{
                    text: '取消',
                    maxWidth:55,
                    handler: function() {
                        this.up('form').getForm().reset();
                    }
                }]
            });

            win = desktop.createWindow({
                id: 'users-grid',
                title:'用户管理',
                width:800,
                height:500,
                iconCls: 'icon-grid',
                layout: {
                    type: 'hbox',
                    align: 'stretch',
                    defaultMargins:{
                        top: 1,
                        right: 1,
                        bottom: 1,
                        left: 1
                    },
                    padding:0
                },
                items: [
                usergrid,
                userform
                ]
            });
        }
        return win;
    }
});

注意id：是users。后面要用到


2、修改desktop目录下的app.js文件

1)在requires中添加'MyDesktop.Users'


2)在getModules中添加new MyDesktop.Users()


3)在getDesktopConfig下的shortcut下的data中添加

{ name: 'Grid Window2', iconCls: 'grid-shortcut', module: 'users' }

其中module：‘’ 里面是设置的ID



双击desktop.html发现出现乱码

解决方案：

1、编辑desktop.html

把<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 

上的iso-8859-1改为UFT-8


2、用记事本打开Users.js

点击另存为，


把下面的编码修改为UFT-8

用新文件替代原有文件




修改图标

{ name: 'Grid Window2', iconCls: 'grid-shortcut', module: 'users' },

这行代码中的iconCls就是指图标，

新建一个图片。命名为bmap.jpg,拷贝到images目录下、图片的像素是48*46

编辑desktop.css

输入代码

.bmap-shortcut {
    background-image: url(../images/bmap.jpg);
}
把{ name: 'Grid Window2', iconCls: 'grid-shortcut', module: 'users' },

中的grid换为bmap


extjs有个自己的预编译，如果你执行完，打开网页，显示了图片之后，在换个图片，是没有效果的，因为他已经保存原有图片了，需要新建个bmap2,修改路径上的../images/bmap2.jpg才能生效











墨墨leo
关注
Desktop_html_www_page_ME_
10-01
some HTM stuff that might me useful
desktop.html
03-24
desktoP脚本
Windows 11 桌面模拟
Byyyi耀的博客
07-30 1093
Windows 11 桌面模拟
windows12网页版开源码HTML开源
09-01
最新的Windows12网页版，采用JavaScript语言及HTML技术全新的Windows12预想图，此Windows系统只是一个演示，可能会与实际的Windows12不符属正常现象 要想打开Windows12网页版只需点击desktop.html文件系统会自动跳转到浏览器界面 此文件免费下载 原文链接在GitHub上，该资源为GitHub上的源码，未经任何删改及添加，请大家放心使用 最新的Windows12操作系统最新的Windows12操作系统最新的Windows12操作系统最新的Windows12操作系统最新的Windows12操作系统最新的Windows12操作系统最新的Windows12操作系统最新的Windows12操作系统最新的Windows12操作系统最新的Windows12操作系统最新的Windows12操作系统最新的Windows12操作系统最新的Windows12操作系统最新的Windows12操作系统最新的Windows12操作系统最新的Windows12操作系统最新的Windows12操作系统最新的Windows12操作系统最新的Windows12操作系统
Ext4.1下desktop桌面快捷方式和开始菜单的动态绑定
weixin_30256505的博客
05-22 157
以前一直用ext2.0,最近刚好有个项目要做个web桌面,于是就下了个4.1,想体验下新的功能~4.1相比2.0,变化还是不少,2.0的desktop以前也实现过~所以对ext的desktop的还是有一定的概念~通过一个下午的努力!实现想要的效果~桌面快捷方式实现比较简单,只需将app.js的shortcuts修改1shortcuts:Ext.create('Ext.data.Store'...
ExtJs桌面组件（DeskTop）
热门推荐
落日小屋
07-17 2万+
ExtJs桌面组件（DeskTop）
extjs4.2 desktop 桌面图标换行
LinBSoft的专栏
01-04 2262
在自带的extjs4.2 desktop例子基础上,修改 desktop.js 文件  添加如下代码: //shortcuts 自动换行 initShortcut: function () { var btnHeight = 64; var btnWidth = 64; var btnPadding = 30;
一点摸索extjs的Desktop
ZAZALLL的专栏
07-25 2572
1、先进入desktop.html 代码 setPath()函数 代替命名空间的(为了节省字数？) 'Ext.ux.desktop' 代替‘js’ 带单引号说明是路径 'js'表示和当前文件(desktop.html)同一目录下的js文件夹 MyDesktop代替'' MyDesktop没有单引号是变量 “”表示和当前文件同一目录下 比如 Ext.require('M
Extjs4 desktop问题
Bing's Home
01-05 3433
最近在开发extjs4项目，当中有用到Desktop例子，当我将一个shortcut修改成为自己的Gridwindow时，使用的store是proxy方式获取数据，但是总是报一个错误： this.tempHidden is undefined!，而且那个窗口就卡死在哪里，无法展示完整。 这让我郁闷了很久，当我修改成为Ex.create()，创建，而不是使用desktop.createWindo
extjs4 desktop拆分classes.js文件
王雷
02-23 2984
extjs4 desktop拆分classes.js文件 --> //
Windows 12 在线体验，已开源！
关注微信公众号【开源Linux】，后台回复『10T』，领取10T学习资源大放送，涵盖Linux、虚拟化、容器、云计算、网络、Python、Go等书籍和视频
09-11 3334
怎么回事？突然间 Windows 12 就来了，还是网页版的?仔细一瞧，原来这是一位开发者看到 Windows 12 概念版（Power by PowerPoint）后深受启发，因而才决定做一个 Windows12 网页版：“此项目基于目前 Windows 版本创造，与微软的 Windows 12 正式版本不一致。此项目绝不附属于微软，且不应与微软操作系统或产品混淆，这也不是 Windows365...
Windows12网页版开源HTML源码
01-09
Windows12网页版开源HTML源码 源码介绍 Windows 12 网页版是一个开源项目, 使用标准网络技术,例如 Html、CSS 和 Javascript, 希望让用户在网络上预先体验Windows 12因为这只是概念版，所以内容可能与 Windows 12 正式版本不一致。
开源Windows12网页版HTML源码
09-20
开源Windows12网页版HTML源码，Win12网页版无需安装即可使用。Windows12概念版（PoweredbyPowerPoint）因此，根据HTML的使用，深受启发、CSS、js等技术制作了这样一个模拟板Windows12系统，并已发布到github进行开源。 这个模拟版Windows12只是一个网页，不是真正的系统。直接打开就能感觉到。看这个UI风格真的很棒，但是好像有点像MacOS。 精致的UI设计，流畅丰富的动画，对于中学生来说真的很棒。 目前，该模拟系统具有体验文件资源管理器、资源管理器、系统配置、计算器、记事本等各种基本功能，并集成了Visual Studio Code、Python等。 甚至内置了 Edge浏览器。 该浏览器确实可以访问互联网、搜索和打开各种网页。 这个项目刚刚发布，但作者还是为这个模拟版Windows12的未来规划了很多功能。 下载代码，无需安装，打开 desktop.html 即
ExtJS控件主要功能用法
暮雪寒寒的随手记
10-16 312
ExtJs combo 以下是combo的用法 特别说明：reference名称不能和bind的store名称重复 { xtype: 'combo',// 声明类型 fieldLabel: '客户名称',// 显示文本 beforeLabelTextTpl: '&lt;font color="red"&gt;*&lt;/font&gt;', // 在显示文本之前添加...
【亲测有效】Windows 12 网页版开源项目常见问题解决方案
最新发布
gitblog_01251的博客
02-06 530
Windows 12 网页版是一款基于 HTML、CSS 和 JavaScript 开发的开源项目，致力于在浏览器中模拟 Windows 12 操作系统的界面与功能。本文将针对用户在使用过程中可能遇到的安装、启动、兼容性等常见问题提供详细解决方案，帮助您快速解决困扰，顺畅体验这款免费的网页版操作系统。 ## 一、安装相关问题解决 ### 1.1 无法安装为 PWA 应用 Windows 12
win7桌面上显示html,Win7系统桌面出现Desktop.ini问题的解决方法
weixin_32511509的博客
05-30 583
如何解决Win7系统桌面出现Desktop.ini的问题?Desktop.ini是系统可识别的一个文件，作用是存储用户对文件夹的个性设置。最近，有Win7系统的用户，发现自己电脑桌面上出现desktop.ini文件感到疑惑和不解。因为从来没有在桌面上创建过desktop.ini文件，不知道怎么冒出来的。那要如何删除desktop.ini文件呢?下面，U大侠小编就给大家介绍Win7系统桌面出现Des...
Windows 12 网页版启动流程全解析：从BIOS到桌面加载的完整指南 [特殊字符]
gitblog_01036的博客
12-03 634
Windows 12 网页版是一个基于现代Web技术构建的开源项目，让用户能够直接在浏览器中体验Windows 12操作系统的界面与交互。这个创新项目通过HTML、CSS和JavaScript完整呈现了Windows系统的启动全过程。在本文中，我们将深入解析Windows 12 网页版的启动流程，带你了解从BIOS设置到桌面加载的每一个关键环节。 ## 🔍 启动流程概览 Windows 12
Ext JS模拟Windows桌面 （项目搭建）
hechurui的专栏
09-10 1245
在Ext JS的目录下包含了相关的例子，Ext JS_HOME/examples/desktop目录下可以找打相关的示例。 （1）把整个desktop文件夹拷贝到主目录下 （2）在主目录下创建一个文件夹script，把Ext JS目录里的下述文件复制到script文件夹中          a) adapter文件夹          b) resources文件夹
GitHub上面开源的 win12网页版
精神病院逃出来的疯子写的博客
08-12 3501
最近发现GitHub上有人发布了他自己做的网页版win12，别人还在秀ppt概念版的win12时有直接做了一个网页版。文件就可以了，按F11(或者Fn+F11)就可以进入全屏模式，就跟操作系统一样了。个性化和此电脑内容虽然不是所有的功能做出来了，但整体的布局还是做完了。他还在内部装了 一个python环境，没错是真的可以写代码的环境。更好玩的是他自己在edge浏览器上嵌套他自己在线体验版。还可以关机，当然不是真关机，刷新一下就会回到登录页面。他还把终端，B站和edge浏览器也做出来了。
ExtJS中FormPanel的labelWidth问题
chenyiya的专栏
01-07 2463
项目需要，在一个弹窗中只有一个FormPanel，form中也只有一个textarea，不需要label，但初始时不管怎样设置label，该宽度依然存在。查看源码，labelWidth默认宽度确实是100，实际操作中，改大可以，改小不见效果。未对源码进行修改，后将layout:form改成layout:fit，之前设置均得到展现，原来布局不自觉的写成form，大意了，也是经验不足！ EXTJS中
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值