ExtJs前台框架搭建

概述：由于前台时间一直在研究desktop，最后有了一点小小的成果。搭建了一个京东商城后台管理的简单框架。

一、首先在ext源码中的examples下的desktop拷贝到自己下。只要它的js目录下的所有js文件和css文件

二、利用的mvc模式来搭建的，首先写的一个app的程序主入口。用define来声明这个类。在html页面中用js代码声明命名空间，引入主入门的app文件，并且实例化，主入门的文件主要拷贝与官方的app文件。分析了代码，简单代码及注释如下：

Ext.define('MyDesktop.App', {

    extend: 'Ext.ux.desktop.App',

    requires: [

        'Ext.window.MessageBox',

        "Ext.ux.desktop.Module",

        'Ext.ux.desktop.ShortcutModel',

//        "Ext.ux.desktop.Settings",

// 'LYApp.xwxbgl.view.xwxbglmainpanel',

        'FMApp.CustomerApp',

        'FMApp.AddressApp',

        'FMApp.GoodApp',

        'FMApp.GoodTypeApp',

        'FMApp.OrderApp',

        'FMApp.OrderDetailApp',

        'FMApp.NoticeApp',

        'FMApp.FeedBackApp'

    ],

    init: function () {

        // custom logic before getXYZ methods get called...

        this.callParent();

        // now ready...

    },

    getModules: function () {

        return [

         new FMApp.CustomerApp(),

         new FMApp.AddressApp(),

            new FMApp.GoodApp(),

            new FMApp.GoodTypeApp(),

            new FMApp.OrderApp(),

            new FMApp.OrderDetailApp(),

            new FMApp.NoticeApp(),

            new FMApp.FeedBackApp()

        //new MyDesktop.Blockalanche(),

        ];

    },

    getDesktopConfig: function () {

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

        return Ext.apply(ret, {

            //cls: 'ux-desktop-black',

            //鼠标右键菜单

            contextMenuItems: [

                { text: '更改背景', handler: me.onSettings, scope: me }

            ],

            //桌面快捷方式

            shortcuts: Ext.create('Ext.data.Store', {

                model: 'Ext.ux.desktop.ShortcutModel',

                data: [

   { name: '客户管理系统', iconCls: 'xwxbgl-shortcut', module: 'customer' },

   { name: '收货地址管理系统', iconCls: 'xwxbgl-shortcut', module: 'address' },

   { name: '商品管理系统', iconCls: 'xwxbgl-shortcut', module: 'good' },

   { name: '商品类型管理系统', iconCls: 'xwxbgl-shortcut', module: 'goodtype' },    

   { name: '订单管理系统', iconCls: 'xwxbgl-shortcut', module: 'order' },    

   { name: '订单明细管理系统', iconCls: 'xwxbgl-shortcut', module: 'orderdetail' },    

   { name: '公告管理系统', iconCls: 'xwxbgl-shortcut', module: 'notice' },    

   { name: '反馈信息管理系统', iconCls: 'xwxbgl-shortcut', module: 'feedback' }    

                      ]

            }),

            //背景

            wallpaper: 'mydesktop/theme/wallpapers/Blue-Sencha.jpg',

            //背景图是否伸展

            wallpaperStretch: true

        });

    },

    // 开始菜单右边

    getStartConfig: function () {

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

        return Ext.apply(ret, {

            title: 'Don Griffin',

            iconCls: 'user',

            height: 300,

            toolConfig: {

                width: 100,

                items: [

                    {

                        text: '更改背景',

                        iconCls: 'settings',

                        handler: me.onSettings,

                        scope: me

                    },

                    '-',

                    {

                        text: '退出系统',

                        iconCls: 'logout',

                        handler: me.onLogout,

                        scope: me

                    }

                ]

            }

        });

    },

    //任务栏设置

    getTaskbarConfig: function () {

        var ret = this.callParent();

        return Ext.apply(ret, {

            //快速启动栏

            quickStart: [

            ],

            trayItems: [

                { xtype: 'trayclock', flex: 1 }

            ]

        });

    },

    onLogout: function () {

        Ext.Msg.confirm('提示', '确定要退出系统么?',function(btn,text){

         if(btn=='yes'){

         Ext.getDoc().close();

         }

        });

    },

    onSettings: function () {

       Ext.Msg.alert("提示","暂时不能更换背景");

    }

});

三、已经有程序的主入门，那们就讲其模块分开，分别有模块的各个入门，采用的mvc的设计模式。一个对应的app文件和自己的对应的app目录形成一体，上面已经将主入门与模块的入门的app已经关联并且实例化。所以我应该在模块入口app文件中定义，官方实例没有使用到mvc，所有我们应该解决的问题是应该调用的Ext.application方法与自己的模块目录联系起来。

四、如果模块较为多，桌面应该换行，所以解决这个问题，主要改desktop的源码，改的是js下的app文件，代码改的方法见帖子：http://blog.csdn.net/zhangshuaipeng/article/details/7253627 

五、简单说下框架的优点和缺点，搭建的不是很好，如果大家有好的建议个想法请及时沟通并改进框架，优点：程序有主入口和各个模块入口，使用mvc模式，所以加载js文件的时候，当使用到模块的时候系统才会自动加载，如果没有使用到则不会浪费内存，动态加载js文件。缺点:代码、文件和目录繁多，有的地方不可能实现通用，低耦合做的不好。

六、效果图片：

七、程序目录结构视图：