我的第一個基於SenchaTouch的WebApp

經過進一周的各種折騰，各種想放棄，各種糾結，最終還是順利的完成了SenchaTouch的開發，回想起來感覺“甜甜的”，也充分體會到Sencha MVC開發模式的好處，以及SenchaTouch.js和Extjs的強大和牛逼，不得不佩服，在我看來這絕對是企業級開發非常強大和優雅的UI開發框架，不喜歡的就不要吐槽了。

這幾天，天天看SenchaTouch的API，指導教程，論壇，不懂就查，幾度崩潰，非常慶幸的是Sencha團隊提供了非常完備的documents，一查就知道。開發經歷還是有點糾結的，剛開始也是不習慣他的MVC開發，干脆所有js都寫在一個頁面里面，就這樣亂亂的完成了，到最后花了一個晚上的時間將其轉換成MVC架構的，才發現其架構的優雅，正是我所追求的，尤其是他對於控件的定位查找，方法綁定等，太帥了，這讓我對Extjs4.0權限框架的開發充滿了信心！！！

對於Sencha的東西，貌似很多人都說上手難，開發效率底。無可厚非剛開始確實很難懂，尤其是僅會用alert的童鞋，但是只要花點時間入門，跟着documents的教程走，會越來越好，開發效率也會越來越高。我以前從未接觸SenchaTouch，當然有點Extjs的功底，也是硬花了1個多星期才寫了一個很小的應用，現在再讓我開發估計兩天時間就差不多了，想學Sencha的同學剛開始一定不要怕哦，硬着頭皮上.....

好了不說廢話了，沒圖發個jb感慨，上本小應用的圖（chrome效果，IPAD上要更好看）：

 

 

Ext.define('PLM.controller.Main', {
    extend: 'Ext.app.Controller',
    config: {
        refs: {
            main: '#PLMMain',
            mainTB: '#PLMMain toolbar',
            product: '#ViewProduct',
            productDetail: '#ProductDetail',
            cdnWin: 'formpanel',
            
            btnSelCdns: '#PLMMain button[action=SelectCondition]',
            btnCdnWinClose: 'formpanel button[action=CdnWinClose]',
            btnCdnWinSearch: 'formpanel button[action=CdnWinSearch]',
            //產品圖冊工具欄按鈕
            btnBackCategory: '#ViewProduct button[action=BackCategory]',
            btnSortBySKC: '#ViewProduct button[action=SortBySKC]',
            btnSortByDesignId: '#ViewProduct button[action=SortByDesignId]',
            btnDesignImg: '#ViewProduct button[action=DesignImg]',
            btnSampleImg: '#ViewProduct button[action=SampleImg]',
            btnImgType: '#ViewProduct #segBtnImageType',
            productToolbar: '#ViewProduct #productviewtb',
            //產品詳細信息
            productDetailTB: '#ProductDetail #detailbar',
            btnBackProduct: '#ProductDetail button[action=BackProduct]',
            btnCancelProduct: '#ProductDetail button[action=CancelProduct]',
            crslDesign: '#ProductDetail #crsl_design',
            crslSample: '#ProductDetail #crsl_sample',
            crslWf: '#ProductDetail #crsl_wf'
        },
        control: {
            //產品詳細信息
            product: {
                itemtap: 'ProductClick'
            },
            btnBackProduct: {
                tap: function () {
                    this.getProductDetail().hide('popOut');
                }
            },
            btnCancelProduct: {
                tap: 'operateimg'
            },
            //選擇條件窗體
            btnSelCdns: {
                tap: 'showConditionWin'
            },
            btnCdnWinClose: {
                tap: 'CdnWinClose'
            },
            btnCdnWinSearch: {
                tap: 'CdnWinSearch'
            },
            main: {
                itemtap: 'CategoryClick'
            },
            btnBackCategory: {
                tap: function () {
                    Ext.Viewport.setActiveItem(this.getMain());
                }
            },
            btnSortBySKC: {
                tap: function () {
                    this.getProduct().getStore().sort('productName', 'ASC');
                }
            },
            btnSortByDesignId: {
                tap: function () {
                    this.getProduct().getStore().sort('designerId', 'ASC');
                }
            },
            btnDesignImg: {
                tap: function () {
                    this.getProduct().setItemTpl(tplDesign);
                    this.getProduct().getStore().load();
                }
            },
            btnSampleImg: {
                tap: function () {
                    this.getProduct().setItemTpl(tplSample);
                    this.getProduct().getStore().load();
                }
            }
        },
    },
    init: function () {
        //第一次事件加載
    },
    launch: function () {
        this.showConditionWin();
        //獲取用戶
        ub = this.getMainTB();
        Ext.Ajax.request({
            url: '/View/Reports/restful/GetCurUser.ashx',
            callback: function (options, success, response) {
                if (success) {
                    ub.setTitle("您好："+response.responseText);
                }
            }
        });
    },
    //顯示條件窗口
    showConditionWin: function () {
        win = this.getCdnWin();
        if (win == null) {
            Ext.Viewport.add(Ext.create('condition'));
            win = this.getCdnWin();
        }
        win.show({ type: 'slide', direction: 'down' });
    },
    //關閉條件窗口
    CdnWinClose: function () {
        this.getCdnWin().hide('popOut');
    },
    //查詢
    CdnWinSearch: function () {
        this.getCdnWin().hide({ type: 'slideOut', direction: 'right' });
        //加載數據
        this.LoadCategoryData();
    },
    //查詢品類
    LoadCategoryData: function () {
        win = this.getCdnWin();
        cdt = {
            brand: win.getValues().sbrand,
            season: win.getValues().sseason,
            series: win.getValues().sseries,
            boduan: win.getValues().sboduan,
            designer: win.getValues().sdesigner,
            skc: win.getValues().sskc
        };
        this.getMain().getStore().getProxy().setExtraParams(cdt);
        this.getMain().getStore().load();
        currentCGRY = "";
    },
    //單擊品類
    CategoryClick: function (list, index, item, record) {
        if (this.getProduct() == null)
            Ext.Viewport.add(Ext.create('Product'));
        Ext.Viewport.setActiveItem(this.getProduct());
        this.LoadProductData(list.getStore().getAt(index).get('category'));
    },
    //根據品類加載產品圖冊信息
    LoadProductData: function (cgry) {
        if (currentCGRY != cgry) {
            win = this.getCdnWin();
            cdt = {
                brand: win.getValues().sbrand,
                season: win.getValues().sseason,
                series: win.getValues().sseries,
                boduan: win.getValues().sboduan,
                designer: win.getValues().sdesigner,
                skc: win.getValues().sskc,
                category: cgry
            };
            this.getProduct().getStore().getProxy().setExtraParams(cdt);
            this.getProduct().setItemTpl(tplDesign);//設置格式
            //重置 圖片類型 按鈕
            this.getBtnImgType().setPressedButtons(this.getBtnDesignImg());
            this.getProductToolbar().setTitle(cgry);
            this.getProduct().getStore().load();
            currentCGRY = cgry;//緩存
        }
    },
    //取消產品
    operateimg: function () {
        skcname = this.getProductDetailTB().getTitle().getHtml();
        //遮罩
        Ext.Msg.confirm("請確認", "您確認暫停該產品嗎？", function (id) {
            if (id == "ok" || id == "yes") {

                Ext.Viewport.setMasked({
                    xtype: 'loadmask',
                    message: '請稍候...'
                });
                Ext.Ajax.request({
                    url: '/View/Reports/restful/Operates.ashx',
                    method: 'POST',
                    params: {
                        skc: skcname,
                        type: 'cancel'
                    },
                    callback: function (options, success, response) {
                        Ext.Viewport.unmask();//關閉遮罩
                        if (success) {
                            obj = Ext.JSON.decode(response.responseText);
                            Ext.Msg.alert('提示', obj.msg);
                        } else {
                            Ext.Msg.alert('異常', '網絡異常,操作失敗！');
                        }
                    }
                });
            }
        });
    },
    //單擊產品
    ProductClick: function (list, index, item, record) {
        if (this.getProductDetail() == null)
            Ext.Viewport.add(Ext.create('ProductDetail'));
        temp = list.getStore().getAt(index);
        //標題
        this.getProductDetailTB().setTitle(temp.get('productName'));
        //圖片
        if (temp.get('desimgb') == '')
            this.getCrslDesign().setHtml('<span>設計草圖</span><br /><br /><br /><br /><h2>暫無大圖顯示</h2>');
        else {
            url = "/FlexPLMAPI/GetFlexImage.aspx?DT=true&IMG=" + encodeURIComponent(temp.get('desimgb'));
            this.getCrslDesign().setHtml('<span>設計草圖</span><br /><img width="480px" src="' + url + '" />');
        }

        if (temp.get('smpimgb') == '')
            this.getCrslSample().setHtml('<span>樣衣圖片</span><br /><br /><br /><br /><h2>暫無大圖顯示</h2>');
        else {
            url = "/FlexPLMAPI/GetFlexImage.aspx?DT=true&IMG=" + encodeURIComponent(temp.get('smpimgb'));
            this.getCrslSample().setHtml('<span>樣衣圖片</span><br /><img width="480px" src="' + url + '" />');
        }

        wfhistory = this.getCrslWf();
        canclebtn = this.getBtnCancelProduct();
        canclebtn.hide();

        this.getProductDetail().show('pop');
        this.getCrslWf().setHtml('<div style="background:url(/View/Reports/SenchaTouch/resources/images/load.gif) center center no-repeat;height:200px;"></div>');
        //獲取產品生命周期
        brand = '';
        if (temp.get('productName').substring(0, 1) == "E")
            brand = "EP";
        else if (temp.get('productName').substring(0, 1) == "G")
            brand = "E.Prosper";

        Ext.Ajax.request({
            url: '/View/Reports/restful/GetLife.ashx',
            method: 'POST',
            params: {
                vr: temp.get('pvr'),
                brand: brand
            },
            callback: function (options, success, response) {
                if (success) {
                    obj = Ext.JSON.decode(response.responseText);
                    if (obj.success == "true") {
                        wfhistory.setHtml("<h1>" + obj.data + "</h1>");
                        //產品暫停按鈕
                        if (obj.pause == "true")
                            canclebtn.show();
                        else
                            canclebtn.hide();
                    }
                    else {
                        wfhistory.setHtml("<h1>" + obj.msg + "</h1>");
                    }
                } else {
                    wfhistory.setHtml("<h1>網絡異常，無法獲取數據！</h1>");
                    Ext.Msg.alert('異常', '網絡異常,無法獲取數據');
                }
            }
        });
    }
});