日期:2014-05-16  浏览次数:20374 次

ExtJs+Json实践例子(1)(因篇幅过长,例子分为两部分)(转)

?

ExtJS本质上也是一个AJAX的框架,但是它和DWR有很大不同,首先,DWRJAVA世界的产物,而ExtJS是后台无关的。也就是说,ExtJS的后台可以是.NET,PHP或者JAVA都可以。其实我们在网上看到的大部分例子都是PHP或者.NET,后台的。这说明ExtJS在所有后台都很受青睐。其次,DWR只关注客户端与服务器端的交互,没有自己的界面组件,而ExtJS最让人惊叹的就是其丰富而强大的界面组件,除此以外,它自身也能轻松地异步访问后台组件。现如今,RIA(富客户端应用)已经成了不争的趋势。那我们现在还不赶紧学习,还更待何时?

?

来张页面刺激下学习欲望先!

??

????我们知道,在WEB开发中有一些共同的开发重心,譬如登陆注册,CRUD(增,删,改,查),数据的分页,排序和过滤,数据的统计报表,数据的导入导出,CookiesSessions的管理等。我们在网上看到很多ExtJS的零零星星的应用,有人做了CRUD,有人做了登陆注册,有了做了复杂查询,还有人扩展了分页,做了服务器端的排序,数据的导出等等,但就是没有人提供一个强大而翔实的案例,把这些ExtJS的知识点统一到项目中,或者有的人已经做除了一些真实的项目,可是又不愿意拿出来分享。哎,有感于此,老许来了。

?

既然是实战,当然需要大家有一定的根基,我给大家提供的开发工具也好,开发文档也罢,都是来帮助大家高效地学习和开发。另外,大家要把网上零零星星的例子多跑几个,然后再进入我们项目的学习。

?

好啦,大家还是要快速搭建好ExtJS应用的环境。测试通过。在我们的整个项目应用中,就两张核心的JS文件,它完成了项目所需要的所有核心功能,具有很高的参考价值。当然代码量也是比较大的:

?

1.????? 首先是init-main.js,这里定义了整个应用的主体布局视图Viewport。它和我们HTML中的frameset有点类似。在我们的主显示区里还放了一个TabPanel,这就是我们桌面应用中常见的选项面板。要理解下面的JS呢,你必须先掌握JSON这种数据格式,这个格式我在前面的ExtJS应用中已经详细讲过,如果还不太清楚,到http://www.json.org/json-zh.html 去看看,JSON在整个ExtJS体系里占有重要地位,熟悉JSON格式的人会对名/值对,{}[]很敏感。大家看到,在Viewport类和TabPanel类里都传入一个JSON对象来初始化整个组件。其次,你还要有容器和组件的概念,每个容器组件(容器同时也是组件,这是相对的,它放东西的时候是容器,被放置其中的时候就是组件!)都有一个items参数指定一个JSON数组来表明自己容纳的组件。我们要完成的功能是上面放公司的LOGO信息,左边是导航菜单栏,右边是主显示区。代码如下:

?

// create main tabpanel

var contentPanel = new Ext.TabPanel({

              id : "tabPanel",

              region : 'center',

              enableTabScroll : true,

              resizeTabs : true, // turn on tab resizing

              deferredRender : false,

              minTabWidth : 115,

              // tabWidth:135,

              activeTab : 0,

              iconCls : 'tabs',