Extjs4模仿desktop的桌面问题

一个华丽的模拟Windows桌面的系统界面一定能让他就像看到穿黑丝的背影一样，感到眼前一亮。虽然穿黑丝的背影正面可能是个大妈，信息系统的核心也绝不是华而不实的界面。不管怎么说提供一个能瞬间亮瞎客户狗眼的界面和交互模式绝对不是件坏事。

说明：

有些地方没有仔细推敲,还有重构的空间,应该没有Bug,不过还是建议学习消化后再用。

我修改了下,代码里只有展现层。业务逻辑和数据访问层我先去掉了，这样比较符合本篇主题，也方便大家单独应用，以后会陆续添加

附送登录页，存在明文传送密码的问题，用在项目中要注意

附送传统菜单页面,主要是为了演示模块化加载功能页,缺少基本的退出,重新登录之类的功能,自己可以添加功能

如果打算全套上ExtJs4,建议看完本系列并熟悉ExtJs4后再酌情考虑。如果只是用这个“壳”，套Iframe用自己的页,那就没啥太大问题了。

如果没有使用ExtJs的经验，不建议用本篇的代码来学习，这是综合应用，代码比较复杂。

先给出 Xg.part1.rar 、 Xg.part2.rar源码下载链接：

http://www.cnblogs.com/legendxian/archive/2011/11/23/2253949.html

部署运行指南：

下载Xg.part1.rar和Xg.part2.rar 两个文件并解压，得到目录 Xg

在 Visual Studio 2010中打开 Xg.sln,如下图

把整个解决方案编译一下,应该没有任何错误。

把Xg.MVC.Application项目设为启动项，然后按F5运行(建议用Chrome浏览器,IE9也行。不建议用IE6,7,8 速度会比较慢)。你也可以部署到IIS里运行。运行起来如下图：

用户名：admin 密码: 000000 界面模式有“酷炫桌面”和“经典菜单”2种选择进去后分别如下图：

不完全使用指南：

目录结构解释：

菜单和快捷方式都是从C#返回的Json动态生成的，打开Fiddler2 根据请求的URL地址找到相应Controller下的Action 就可以查看到代码。

Asp.Net大型项目实践系列第二季(三)莫人云亦云,莫走弯路!ExtJs 认知、开发、调试3.“测试模块1”演示了ExtJS4的按需加载新特性，也就是只有你打开这个模块的时候，js才会加载。所以在Module1.aspx并没有对Module1.js的引用。而是这样去new了一个模块对象的实例：

<script type="text/javascript">

Ext.create('Mod.TestModule.Module1', {modId: '/TestModule/Module1/Module1'})

</script>

要注意的是按需加载需要在run.js里注册文件夹路径：

Ext.Loader.setConfig({

enabled : true,

paths : {

'Mod.TestModule' : 'http://www.cnblogs.com/Scripts/Mod/TestModule',

'OIT.ex' : 'http://www.cnblogs.com/Scripts/Extensions',

'Ext.ux' : 'http://www.cnblogs.com/Scripts/ux'

}

})

如果不想要那个在飘的浮云，去run.js去掉如下代码：

// 浮云控制

var i = -500

var el = Ext.get('scene_cloud')

var cloudTask = {

run : function() {

el.setStyle('left', i + 'px')

i++

if (i >document.body.clientWidth)

i = -500

},

interval : 30

}

Ext.TaskManager.start(cloudTask)

WallpaperSettings.js可以设置自己的背景图片列表，对应的文件夹是“\Scripts\Desktop\wallpapers”

store : new Ext.data.TreeStore({

model : 'HMSDesktop.WallpaperModel',

root : {

text : 'Wallpaper',

expanded : true,

children : [{

text : "无",

iconCls : 'asterisk_orange',

leaf : true

}, child('blue.jpg'),

child('blue-curtain.jpg'),

child('fields-of-peace.jpg'),

child('fresh-morning.jpg'),

child('colorado-farm.jpg'),

child('blue-swirl.jpg'),

child('desk.jpg'),

child('desktop.jpg'),

child('desktop2.jpg'),

child('sky.jpg'),

child('19201080.jpg'),

child('FGHJ_079020.jpg'),

child('cloud.jpg')]

}

})

HMSDesktop.js是桌面js的实例，建议从这里看起，改开始菜单的标题也在这里：

// 开始菜单

getStartConfig : function() {

var me = this, ret = me.callParent()

return Ext.apply(ret, {

title : '传说中的弦哥',

height : 400,

logo图片啥的路径在“\Content“和"\Scripts\Desktop\images"下，可以自己换。

功能丰富，无人能出其右

无论是界面之美，还是功能之强，ext的表格控件都高居榜首。

单选行，多选行，高亮显示选中的行，推拽改变列宽度，按列排序，这些基本功能咱们就不提了。

自动生成行号，支持checkbox全选，动态选择显示哪些列，支持本地以及远程分页，可以对单元格按照自己的想法进行渲染，这些也算可以想到的功能。

再加上可编辑grid，添加新行，删除一或多行，提示脏数据，推拽改变grid大小，grid之间推拽一或多行，甚至可以在tree和grid之间进行拖拽，啊，这些功能实在太神奇了。更令人惊叹的是，这些功能竟然都在ext表格控件里实现了。

呵呵~不过ext也不是万能的，与fins的ecside比较，ext不能锁定列（土豆说1.x里支持锁定列，但是2.0里没有了，因为影响效率。），也没有默认的统计功能，也不支持excel，pdf等导出数据。另外fins说，通过测试ecside的效率明显优于ext呢。:)

1、在工具->Internet选项->高级，去掉“禁用脚步调试（Internet Explorer）”项的勾选。

2、去掉“显示友好http错误信息”项的勾选。最后点击应用，确定按钮。

3、预览表单，当要执行的js程序出现错误时，浏览器会给出提示。

4、在给出的错误提示窗口中，选择“是（Y）”按钮，进入IE浏览器自带的开发人员工具脚本调试界面。

5、根据JS调试信息可以知道，当前JS报错是由于没有找到指定对象“dat”而导致的。需要在表单设计器中，修改JS程序并保存。因演示效果的需要，在本例中是没有设置id值为dat的单行输入框控件的，本例中第二个单行输入框控件的id值是data2。

6、将其改成值data2后，再进行测试不会出现JS报错信息，程序得以正常执行。

---