Asp.Net大型項目實踐系列第二季（二）Windows案頭的ExtJs4實現(含源碼)

　　女人用絲襪征服男人,男人用絲襪征服銀行，光鮮亮麗的外表和封裝是非常重要的。對於看慣了千篇一律的架構菜單介面的客戶，一個華麗的類比Windows案頭的系統介面一定能讓他就像看到穿黑絲的背影一樣，感到眼前一亮。雖然穿黑絲的背影正面可能是個大媽，資訊系統的核心也絕不是華而不實的介面。不管怎麼說提供一個能瞬間亮瞎客戶狗眼的介面和互動模式絕對不是件壞事。

　　源碼下載：Xg.part1.rar ,  Xg.part2.rar

說明：

1.有些地方沒有仔細推敲,還有重構的空間,應該沒有Bug,不過還是建議學習消化後再用。

2.我修改了下,代碼裡只有展現層。商務邏輯和資料訪問層我先去掉了，這樣比較符合本篇主題，也方便大家單獨應用，以後會陸續添加

3.附送登入頁，存在明文傳送密碼的問題，用在項目中要注意

4.附送傳統菜單頁面,主要是為了示範模組化載入功能頁,缺少基本的退出,重新登入之類的功能,自己可以添加功能

5.如果打算全套上ExtJs4,建議看完本系列並熟悉ExtJs4後再酌情考慮。如果只是用這個“殼”，套Iframe用自己的頁,那就沒啥太大問題了。

6.如果沒有使用ExtJs的經驗，不建議用本篇的代碼來學習，這是綜合應用，代碼比較複雜。

部署運行指南：

1.下載Xg.part1.rar和Xg.part2.rar 兩個檔案並解壓，得到目錄 Xg

2.在 Visual Studio 2010中開啟 Xg.sln,如

 

3.把整個解決方案編譯一下,應該沒有任何錯誤。

4.把Xg.MVC.Application項目設為啟動項，然後按F5運行（建議用Chrome瀏覽器,IE9也行。不建議用IE6,7,8 速度會比較慢）。你也可以部署到IIS裡運行。運行起來如：

5.使用者名稱：admin 密碼: 000000  介面模式有“酷炫案頭”和“經典菜單”2種選擇進去後分別如：

 

不完全使用指南：

1.目錄結構解釋：

2.菜單和捷徑都是從C#返回的Json動態產生的，開啟Fiddler2 根據請求的URL地址找到相應Controller下的Action 就可以查看到代碼。

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'
            }
        });

3.如果不想要那個在飄的浮雲，去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);

4.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')]
                                }
                            })

5.HMSDesktop.js是案頭js的執行個體，建議從這裡看起，改開始菜單的標題也在這裡：

    // 開始菜單
    getStartConfig : function() {
var me = this, ret = me.callParent();

return Ext.apply(ret, {
                    title : '傳說中的弦哥',
                    height : 400,

 

6.logo圖片啥的路徑在“\Content“和"\Scripts\Desktop\images"下，可以自己換。

 

下篇預告：

估計大家會提出一些問題，計划下篇集中回答和解決大家關於本篇的問題，以及更詳細的各個介面元素的代碼說明。

 

如果大家沒有提啥問題，那下篇將會是這個：

Asp.Net大型項目實踐系列第二季（三）莫人云亦云,莫走彎路!ExtJs 認知、開發、調試 
華麗的背後是枯燥的代碼，這就是程式員的杯具，把華麗帶給別人，把枯燥留給自己....下篇我們將討論對ExtJs認識的誤區，評估它是否適合用在你的項目中，並且弦哥會帶你走捷徑，正確的掌握ExtJs的開發和調試方法，讓ExtJs的上手和開發不再糾結...

 

To  be continue...