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上要更好看):

ceb23dd8adb5fffa8112978f2c4b62a3.png

5e680bbd64cef7c53f4c85261fd27a6d.png

933b069a97199a7d3b3854da860e99bd.png

0dc2ca2a52b5729229616ebfa890f6fe.png

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('设计草图'%20+%20url%20+%20'');

}

if (temp.get('smpimgb') == '')

this.getCrslSample().setHtml('样衣图片

暂无大图显示

');

else {

url = "/FlexPLMAPI/GetFlexImage.aspx?DT=true&IMG=" + encodeURIComponent(temp.get('smpimgb'));

this.getCrslSample().setHtml('样衣图片'%20+%20url%20+%20'');

}

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('异常', '网络异常,无法获取数据');

}

}

});

}

});

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/564180.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C++关联容器,STL关联容器

关联容器内部的元素都是排好序的,有以下四种。 set:排好序的集合,不允许有相同元素。multiset:排好序的集合,允许有相同元素。map:每个元素都分为关键字和值两部分,容器中的元素是按关键字排序的…

linux练习 串口跟进程6,linux下串口测试程序

linux下串口测试程序通过简单的参数配置,执行文件串口号波特率#include stdio.h#include stdlib.h#include unistd.h#include sys/types.h#include sys/stat.h#include fcntl.h#include errno.h#include sys/time.h#include time.h#include string.h#include sys/io…

C++ pair类模板

在学习关联容器之前&#xff0c;首先要了解 STL 中的 pair 类模板&#xff0c;因为关联容器的一些成员函数的返回值是 pair 对象&#xff0c;而且 map 和 multimap 容器中的元素都是 pair 对象。pair 的定义如下&#xff1a; template <class_Tl, class_T2> struct pair…

kali linux关闭进程,技术|如何使用 Kali Linux 黑掉 Windows

Kali Linux 派生自 Debian Linux&#xff0c;主要用于渗透测试&#xff0c;拥有超过 300 个的预安装好的渗透测试工具。Metasploit 项目中 Metasploit 框架支持 Kali Linux 平台&#xff0c;Metasploit 是一个用于开发和执行安全利用代码(security exploit)的工具。让我们来使用…

C++ multiset

multiset 是关联容器的一种&#xff0c;是排序好的集合&#xff08;元素已经进行了排序&#xff09;&#xff0c;并且允许有相同的元素。 不能直接修改 multiset 容器中元素的值。因为元素被修改后&#xff0c;容器并不会自动重新调整顺序&#xff0c;于是容器的有序性就会被破…

linux命令中的cp,Linux高级技术:关于cp命令中拷贝所有的写法

Linux高级技术&#xff1a;关于cp命令中拷贝所有的写法发布时间:2007-09-30 21:39:36来源:红联作者:GiftPot今天在编写一个脚本的时候&#xff0c;发现一个比较奇怪的问题&#xff1a;就是在使用cp拷贝当前目录下所有文件到目标目录的时候&#xff0c;源和目标目录大小不同。原…

C++ set

set 是关联容器的一种&#xff0c;是排序好的集合&#xff08;元素已经进行了排序&#xff09;。set 和 multiset 类似&#xff0c;它和 multiset 的差别在于 set 中不能有重复的元素。multiset 的成员函数 set 中也都有。 不能直接修改 set 容器中元素的值。因为元素被修改后…

linux内核实现ipsec,IP XFRM配置示例:利用linux kernel自带的IPSec实现,手动配置IPSec...

1、拓扑192.168.18.101 <> 192.168.18.1022、配置192.168.18.101ip xfrm state add src 192.168.18.101 dst 192.168.18.102 proto esp spi 0x00000301 mode tunnel auth md5 0x96358c90783bbfa3d7b196ceabe0536b enc des3_ede 0xf6ddb555acfd9d77b03ea3843f2653255afe8e…

linux 内核 82540网卡,Linux网卡as4.2 编译安装及配置准备

Linux网卡as4.2 编译安装及配置准备[日期&#xff1a;2008-03-28]来源&#xff1a;Linux公社作者&#xff1a;Linux整理[字体&#xff1a;大 中 小]确定make gcc kernel-devel包必须安装,没安装的话需要手动安装查看是否安装方法rpm -aq|gccrpm -aq|makerpm -aq|kernel-devel解…

C++ 容器适配器

STL 中的容器适配器有 stack、queue、priority_queue 三种。它们都是在顺序容器的基础上实现的&#xff0c;屏蔽了顺序容器的一部分功能&#xff0c;突出或增加了另外一些功能。 容器适配器都有以下三个成员函数&#xff1a; push&#xff1a;添加一个元素。top&#xff1a;返…

linux管理进程和计划任务,Linux进程和计划任务管理

本章结构#查看进程#控制进程#at一次性任务设置#crontab周期性任务设置程序和进程的关系#程序保存在硬盘、光盘等介质中的可执行代码和数据静态保存的代码#进程在cpu及内存中运行的程序代码动态执行的代码父、子进程&#xff1a;每个进程可以创建一个或多个进程查看进程ps#ps命令…

C++ stack

stack 是容器适配器的一种。要使用 stack&#xff0c;必须包含头文件 。 stack就是“栈”。栈是一种后进先出的元素序列&#xff0c;访问和删除都只能对栈顶的元素&#xff08;即最后一个被加入栈的元素&#xff09;进行&#xff0c;并且元素也只能被添加到栈顶。栈内的元素不…

C++ queue和priority_queue

queue 和 priority_queue 都是容器适配器&#xff0c;要使用它们&#xff0c;必须包含头文件 。 queue queue 就是“队列”。队列是先进先出的&#xff0c;和排队类似。队头的访问和删除操作只能在队头进行&#xff0c;添加操作只能在队尾进行。不能访问队列中间的元素。 qu…

less linux命令,less 命令用法详解

less 在 Linux 中用来查看文件&#xff0c;它可以以分页的方式显示文件内容。目前和tail 是用来查看文件的常用命令命令格式less [参数] 文件1、使用示例less a.txt用来查看文件按f 或 space 向下翻一页按b向前翻一页其实很好记f即forward 向前b即backward 向后关键最强大的一点…

STL算法分类

STL 中&#xff0c;算法就是函数模板。STL 中的算法大多数是用来对容器进行操作的&#xff0c;如排序、 查找等。大部分算法都是在头文件 中定义的&#xff0c;还有些算法用于数值处理&#xff0c;定义在头文件 中。 STL 中的算法的分类方法。 1 . 不变序列算法。 2 . 变值算法…

linux系统时间代表,Linux上有两种时间,一种是硬件时间,一种是系统时间

date 系统时间clock/hwclock 硬件时钟cal 日历date打印或设置系统日期或时间&#xff0c;以给定格式显示或设置系统时间%a显示周%A 完整显示周%b显示月份%B 完整显示月%c e.g.,Thu Mar 3 23:05:25 2005%C 显示世纪%d显示几日%D …

linux下软件包清理,Linux运维知识:如何清理Linux系统中的孤立、无用的软件包

本文主要向大家介绍了Linux运维知识的如何清理Linux系统中的孤立、无用的软件包&#xff0c;通过具体的内容向大家展现&#xff0c;希望对的大家学习Linux运维知识有所帮助。在Linux下安装软件&#xff0c;通常会自动安装一些依赖包或库。在你卸载某个软件后&#xff0c;这个软…

linux 多个定时器,timer: 一个Linux下的超级精简的多重定时器:可实现成千上万个定时任务,定时精度可达纳秒级别,且同一时间点可添加不同的任务!适用于云后台服务和嵌入式等各种环境。...

MT_Timer(MT译为Multiple或Multi)一、介绍一个Linux下的超级简洁的定时器&#xff1a;利用epoll机制和timerfd新特性实现的多重、多用、多个定时任务实现。只需要使用TIMER_CREATE()接口创建一个定时器实体&#xff0c;即可向其添加成千上万个定时任务&#xff0c;定时任务可达…

C++ bitset类

bitset 模板类由若干个位&#xff08;bit&#xff09;组成&#xff0c;它提供一些成员函数&#xff0c;使程序员不必通过位运算就能很方便地访问、修改其中的任意一位。bitset 模板类在头文件 中定义如下&#xff1a; template <size_t N> class bitset {... };size_t 可…

red flag linux指定域名,Red Flag Server 4.1 系统管理手册(适用桌面linux4.1) 6

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼第3章 文件系统管理 (三)--------------------------------------------------------------------------------3.6 LVM逻辑卷管理LVM 是 Logical Volume Manager 的简写&#xff0c;它为计算机提供了更高层次的磁盘存储解决方案&am…