编程记录，亲测有效

ExtJs在2.x之后如果用于商业用途将会收费，在官网如果要下载就要给钱，但是完全传说中有个gpl版本，可以随便用，不过法律上的问题就不是我们程序猿细究的事情了。至少自己弄来玩玩是不会有什么问题的。ExtJs这东西，个人觉得非常适合做OA，简直就是把以前的VC6的MFC搬到网页上面来了。下面以ExtJs4.2.1为例子，讲述这东西是如何开发的。不同的版本的ExtJs可能会有不同，因为ExtJs

ExtJs饼状图没有《【ExtJs】柱状图，改变每条柱子的颜色》（点击打开链接）这么难做，因为其每块拼饼的颜色都是天生不同的，不用自己写渲染器。关键是做好动画效果。一、基本目标比如如下图的带动画的ExtJs饼状图效果。鼠标悬停到某块拼饼上面，会突出出来。二、制作过程还是与《【ExtJs】柱状图，改变每条柱子的颜色》（点击打开链接）、《【ExtJs】折线图》（

ExtJs在ExtJs4之后，包含4则推出了图表功能，虽然图表功能可以通过其余JQuery插件实现，例如《【jQuery】兼容IE6的图表插件Highcharts》（点击打开链接），但是这个ExtJs的图表插件也很优秀，至少一些常见的图表也是不虚的。一、基本目标画出如下的折现图：二、制作过程首先，ExtJs绘制图表的项目，与《【ExtJs】与后台数据库交互的

ExtJs的柱状图的画法其实与《【ExtJs】折线图》（点击打开链接）的画法几乎完全一样，难点在于各个柱子的颜色。ExtJs对于柱状图的颜色，并没有单独为其开放独立的参数。因此还是与《【ExtJs】表格控件Grid的增删改查，利用renderer让操作列actioncolumn使用文字而不是图标》（点击打开链接）一样，要自己单独设置东西，必须使用到渲染器。如果不设置，它画出来的柱状图，每次都是同样

ExtJs的文件上传也是采用Ajax的方式，基本上，用户上传之后，其结果马上推回给前台。下面以一个ExtJs图片上传系统，说明这个问题。一、基本目标实现如下的一个图片上传的系统，不是基本图片格式，大于1M的图片不给予上传，上传成功显示图片，上传不成功，则显示错误信息。二、基本思想这个工程的目录结构如下，如FileUpload.html的HTML布

利用ExtJs的Anchor可以为ExtJs自带的表单Form各个组件进行布局，当然，使用《【ExtJs】带日期组件的文本输入框、容器与Ext.Msg.alert告警框告警两次》（点击打开链接）中的vbox也是可以的。其实ExtJs的表单插件与表单布局并不是关键，ExtJs的表单验证还好，就几行语句就能够完成。关键是ExtJs的表单提交必须通过Ajax方式，而在后台必须传回一个Json完成表单的提

ExtJs的表格组件Grid是可以分页的，并且这个组件是随时随地地与后台数据库进行这交互。正如VC的MFC中的List表格控件一样。基本上，这个表格控件作为OA系统的主角，配合《【ExtJs】利用树状结构、Border布局与标签页刻划OA界面》（点击打开链接）就真的是一个完整的OA系统了。然而网上对于此组件的叙述非常糟糕，各类杂七杂八的资料，层出不同的后端语言，让人根本看不明白。下面举一个

这东西非常简单，只要你会用aspx,jsp,php等任意一种服务器语言或者框架，知道怎么获取页面传递参数就行了。ExtJs的Ajax甚至比Jquery的还要简短。一、基本目标就比如如下图的一个极其简单的例子，Ajax.html有一个按钮，一点击，传递a=10与b=20这两个值去Helloworld.jsp或者Helloworld.php，然后Helloworld.jsp或者He

对于ExtJs表单中的多行文本框，本身就自带一个没有格式的textareafield。如果要呈现一个带格式的文本编辑器给用户，ExtJs本身就自带一个htmlEditor。一、基本目标比如下图的带编辑器的文本框。这个组件具有加粗、斜体、下划线，增加减少字号，颜色等功能，而且自动会对文本自动编码，无需担心跨站攻击，只要在后台防范好SQL注入就可以了。如下图，即使在

ExtJs中，除了border布局可以很好地做出成熟的界面，《【ExtJs】利用树状结构、Border布局与标签页刻划OA界面》（点击打开链接），常用的标签页布局《【ExtJs】tabPanel标签页与修改标签页的内容》（点击打开链接）以外。在ExtJs中我觉得最好的主布局还有折叠式布局与卡片式布局，而使组件一列排列vbox布局，与使组件一行排列hbox布局，我觉得还可以出出子布局，也就是主布局里

标签页是一个很重要的插件，正如《【mfc】标签页》（点击打开链接）在VC6中的地位，通过ExtJs中能够在网页中轻松地实现一个与客户端一模一样的标签页。一、基本目标创建如下的标签页，在底部的工具栏有两个按钮，一个可以增加标签页，增加的标签的内容就是当前的时间。这里只作为例子，一般标签页里面的内容，是放个iframe,或者通过无参数传递的ajax直接从别的网页中取，避免在javasc

之前说ExtJs是最适合做OA界面的前端框架，因为它把客户端界面搬来了网页，这东西可以说是，就是为那些各种各样的OA信息系统而生的。一、基本目标做出如下的OA界面，点击左边的项可以打开相应的标签页，点击标签页的关闭按钮可以关闭这个标签页，在下方的操作信息栏记录相应的操作。树状结构可以折叠，可以调整。操作信息可以节点。搞出这样的结构，就是从小的方面研究ExtJs的其它

确定框与模态输入框在VC6的MFC窗体程序是不可或缺地东西，还记得在VC6的MFC搞一个模态输入框是多么蛋疼的一件事，详见《【mfc】用对话框的切换实现重新登录》（点击打开链接），但是搬到网页上，用ExtJs，几行代码就可以实现这东西。关键是兼容IE6，然后你之后就按往常一样，获取用户的输入的内容做Ajax什么都可以。一、基本目标先搞出如下简单的程序，当用户点按钮1，就出一个模态确

ExtJs的UI组件主要模仿客户端的界面效果，甚至其编程方式都有类似之处。一、基本目标比如如下的组件，与VC6中的《【mfc】不同对话框之间互相操控、全局变量与日期控件》（点击打开链接）就有异曲同工之妙。其基本的思想也是先设置两个日期组件与按钮组件，然后，在点击按钮，就触发事件。二、制作过程首先，这个网页全程运用ExtJs编程，因此基本的HTML布局，处

在《【ExtJs】与后台数据库交互的带分页表格组件grid的查询》（点击打开链接）中介绍了Grid控件是怎么分页显示的。再加上对此控件内的数据的增加、删除、修改，就真的是大功告成了。此控件的排序，应该在后台的数据库查询语句中增加一条order by语句即可，前台的排序在分页之后，仅能对当前页进行排序，没有什么意义。下面举一个例子来说明，如果对ExtJs的表格控件Grid进行增删改查一、