sencha app watch php,我的第一个基于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('設計草圖
暫無大圖顯示
');else {
url = "/FlexPLMAPI/GetFlexImage.aspx?DT=true&IMG=" + encodeURIComponent(temp.get('desimgb'));
this.getCrslDesign().setHtml('設計草圖');
}
if (temp.get('smpimgb') == '')
this.getCrslSample().setHtml('樣衣圖片
暫無大圖顯示
');else {
url = "/FlexPLMAPI/GetFlexImage.aspx?DT=true&IMG=" + encodeURIComponent(temp.get('smpimgb'));
this.getCrslSample().setHtml('樣衣圖片');
}
wfhistory = this.getCrslWf();
canclebtn = this.getBtnCancelProduct();
canclebtn.hide();
this.getProductDetail().show('pop');
this.getCrslWf().setHtml('
//獲取產品生命周期
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("
" + obj.data + "
");//產品暫停按鈕
if (obj.pause == "true")
canclebtn.show();
else
canclebtn.hide();
}
else {
wfhistory.setHtml("
" + obj.msg + "
");}
} else {
wfhistory.setHtml("
網絡異常，無法獲取數據！
");Ext.Msg.alert('異常', '網絡異常,無法獲取數據');
}
}
});
}
});
總結
以上是生活随笔為你收集整理的sencha app watch php,我的第一个基于SenchaTouch的WebApp的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： mysql 数据迁移_CentOS7迁移
- 下一篇： 动态规划算法php,php算法学习之动态