sencha app watch php,我的第一个基于SenchaTouch的WebApp
經(jīng)過(guò)進(jìn)一周的各種折騰，各種想放棄，各種糾結(jié)，最終還是順利的完成了SenchaTouch的開發(fā)，回想起來(lái)感覺“甜甜的”，也充分體會(huì)到Sencha MVC開發(fā)模式的好處，以及SenchaTouch.js和Extjs的強(qiáng)大和牛逼，不得不佩服，在我看來(lái)這絕對(duì)是企業(yè)級(jí)開發(fā)非常強(qiáng)大和優(yōu)雅的UI開發(fā)框架，不喜歡的就不要吐槽了。
這幾天，天天看SenchaTouch的API，指導(dǎo)教程，論壇，不懂就查，幾度崩潰，非常慶幸的是Sencha團(tuán)隊(duì)提供了非常完備的documents，一查就知道。開發(fā)經(jīng)歷還是有點(diǎn)糾結(jié)的，剛開始也是不習(xí)慣他的MVC開發(fā)，干脆所有js都寫在一個(gè)頁(yè)面里面，就這樣亂亂的完成了，到最后花了一個(gè)晚上的時(shí)間將其轉(zhuǎn)換成MVC架構(gòu)的，才發(fā)現(xiàn)其架構(gòu)的優(yōu)雅，正是我所追求的，尤其是他對(duì)于控件的定位查找，方法綁定等，太帥了，這讓我對(duì)Extjs4.0權(quán)限框架的開發(fā)充滿了信心！！！
對(duì)于Sencha的東西，貌似很多人都說(shuō)上手難，開發(fā)效率底。無(wú)可厚非剛開始確實(shí)很難懂，尤其是僅會(huì)用alert的童鞋，但是只要花點(diǎn)時(shí)間入門，跟著documents的教程走，會(huì)越來(lái)越好，開發(fā)效率也會(huì)越來(lái)越高。我以前從未接觸SenchaTouch，當(dāng)然有點(diǎn)Extjs的功底，也是硬花了1個(gè)多星期才寫了一個(gè)很小的應(yīng)用，現(xiàn)在再讓我開發(fā)估計(jì)兩天時(shí)間就差不多了，想學(xué)Sencha的同學(xué)剛開始一定不要怕哦，硬著頭皮上.....
好了不說(shuō)廢話了，沒圖發(fā)個(gè)jb感慨，上本小應(yīng)用的圖(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]',
//產(chǎn)品圖冊(cè)工具欄按鈕
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',
//產(chǎn)品詳細(xì)信息
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: {
//產(chǎn)品詳細(xì)信息
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' });
},
//關(guān)閉條件窗口
CdnWinClose: function () {
this.getCdnWin().hide('popOut');
},
//查詢
CdnWinSearch: function () {
this.getCdnWin().hide({ type: 'slideOut', direction: 'right' });
//加載數(shù)據(jù)
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'));
},
//根據(jù)品類加載產(chǎn)品圖冊(cè)信息
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);//設(shè)置格式
//重置 圖片類型 按鈕
this.getBtnImgType().setPressedButtons(this.getBtnDesignImg());
this.getProductToolbar().setTitle(cgry);
this.getProduct().getStore().load();
currentCGRY = cgry;//緩存
}
},
//取消產(chǎn)品
operateimg: function () {
skcname = this.getProductDetailTB().getTitle().getHtml();
//遮罩
Ext.Msg.confirm("請(qǐng)確認(rèn)", "您確認(rèn)暫停該產(chǎn)品嗎？", function (id) {
if (id == "ok" || id == "yes") {
Ext.Viewport.setMasked({
xtype: 'loadmask',
message: '請(qǐng)稍候...'
});
Ext.Ajax.request({
url: '/View/Reports/restful/Operates.ashx',
method: 'POST',
params: {
skc: skcname,
type: 'cancel'
},
callback: function (options, success, response) {
Ext.Viewport.unmask();//關(guān)閉遮罩
if (success) {
obj = Ext.JSON.decode(response.responseText);
Ext.Msg.alert('提示', obj.msg);
} else {
Ext.Msg.alert('異常', '網(wǎng)絡(luò)異常,操作失敗！');
}
}
});
}
});
},
//單擊產(chǎn)品
ProductClick: function (list, index, item, record) {
if (this.getProductDetail() == null)
Ext.Viewport.add(Ext.create('ProductDetail'));
temp = list.getStore().getAt(index);
//標(biāo)題
this.getProductDetailTB().setTitle(temp.get('productName'));
//圖片
if (temp.get('desimgb') == '')
this.getCrslDesign().setHtml('設(shè)計(jì)草圖
暫無(wú)大圖顯示
');else {
url = "/FlexPLMAPI/GetFlexImage.aspx?DT=true&IMG=" + encodeURIComponent(temp.get('desimgb'));
this.getCrslDesign().setHtml('設(shè)計(jì)草圖');
}
if (temp.get('smpimgb') == '')
this.getCrslSample().setHtml('樣衣圖片
暫無(wú)大圖顯示
');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('
//獲取產(chǎn)品生命周期
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 + "
");//產(chǎn)品暫停按鈕
if (obj.pause == "true")
canclebtn.show();
else
canclebtn.hide();
}
else {
wfhistory.setHtml("
" + obj.msg + "
");}
} else {
wfhistory.setHtml("
網(wǎng)絡(luò)異常，無(wú)法獲取數(shù)據(jù)！
");Ext.Msg.alert('異常', '網(wǎng)絡(luò)異常,無(wú)法獲取數(shù)據(jù)');
}
}
});
}
});
總結(jié)
以上是生活随笔為你收集整理的sencha app watch php,我的第一个基于SenchaTouch的WebApp的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： mysql 数据迁移_CentOS7迁移
- 下一篇： 图片滚动显示