当前位置: 代码迷 >> JavaScript >> ExtJs+Json实践事例(1)(因篇幅过长,例子分为两部分)(转)
  详细解决方案

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

热度:238   发布时间:2012-11-01 11:11:32.0
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',

              items : [{

                            contentEl : 'center',

                            title : '主页',

                            autoScroll : true

                       }],

              defaults : {

                   autoScroll : true

              },

              plugins : new Ext.ux.TabCloseMenu()

         });

//ExtJs应用的入口

Ext.onReady(function() {

     Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

     

     // init main page framework

     var viewport = new Ext.Viewport({

         layout : 'border',

         items : [{

              region : 'north',

              html : '<img src="resources/images/dwr_logo.gif" width=210 height=100><img src="resources/images/struts.png" ><img src="resources/images/hibernate.gif" width=200 height=90 ><img src="resources/images/spring_logo.png" width=200 height=70><img src="resources/images/extjs_logo.gif" height=60>',

              split : true,

              height : 130,

              minSize : 100,

              maxSize : 200,

              collapsible : true,

              title : '房屋出租系统',

              margin : '0 0 0 0'

                   // border: false,

                   // layout:"absolute"

         }, {

              region : 'west',

              id : 'west-panel',

              title : '菜单栏',

              split : true,

              width : 200,

              minSize : 175,

              maxSize : 400,

              collapsible : true,

              margins : '0 0 5 5',

              cmargins : '0 5 5 5',

              layout : 'accordion',

              layoutConfig : {

                   animate : true

              },

              items : [{

                            title : '房屋管理',

                            html : Ext.getDom('userMenus').innerHTML,

                            autoScroll : true,

                            border : false,

                            iconCls : 'user'

                       }, {

                            title : '机构管理',

                            html : Ext.getDom('unitMenus').innerHTML,

                            border : false,

                            autoScroll : true,

                            iconCls : 'unit'

                       }, {

                            title : '系统设置',

                            html : Ext.getDom('settingMenus').innerHTML,

                            border : false,

                            autoScroll : true,

                            iconCls : 'settings'

                       }, {

                            title : '电子日历',

                            // html : Ext.getDom('settingMenus').innerHTML,

                            border : false,

                            autoScroll : true,

                            iconCls : 'settings',

                            items : [new Ext.form.DateField()]

 

                        }, {

                            title : '企业短信',

                            html : Ext.getDom('msg').innerHTML,

                            border : false,

                            autoScroll : true,

                            iconCls : 'settings'

 

                       }, {

                            title : '公文审批',

                            // html : Ext.getDom('msg').innerHTML,

                            border : false,

                            autoScroll : true,

                            iconCls : 'settings'

 

                       }, {

                            title : '电子会议',

                            html : Ext.getDom('eMeeting').innerHTML,

                            border : false,

                            autoScroll : true,

                            iconCls : 'settings'

 

                       }, {

                            title : '电子邮件',

                            // html : Ext.getDom('msg').innerHTML,

                            border : false,

                            autoScroll : true,

                            iconCls : 'settings'

 

                       }, {

                            title : '电子文档',

                            // html : Ext.getDom('msg').innerHTML,

                            border : false,

                            autoScroll : true,

                            iconCls : 'settings'

 

                       }, {

                            title : '个性化设置',

                            // html : Ext.getDom('msg').innerHTML,

                            border : false,

                            autoScroll : true,

                            iconCls : 'settings'

 

                       }]

         }, contentPanel]

     });

 

     // init main page tables

     var panel = new Ext.Panel({

                   id : 'main-panel',

                   baseCls : 'x-plain',

                   renderTo : Ext.get("center"),

                   layout : 'table',

                   layoutConfig : {

                       columns : 2

                   },

                   defaults : {

                       frame : true,

                       width : 395

                   },

                   items : [{

                                 title : '公告信息',

                                 colspan : 2,

                                 collapsible : true,

                                 width : 800,

                                 height : 430,

                                 contentEl : 'afficheDiv'

                            }]

              });

     // clear temp elements.

     Ext.getDom("menus").innerHTML = "";

});

// 定义菜单导航函数

function onClickMenuItem(node) {

     var n = contentPanel.getComponent(node.id);

     if (!n) { // //判断是否已经打开该面板

         n = contentPanel.add({

                       'id' : node.id,

                       'title' : node.innerHTML,

                       iconCls : 'tabs',

                       closable : true,

                       autoLoad : {

                            url : 'tabFrame.jsp?url=' + node.href,

                            callback : this.initSearch,

                            scope : this,

                            scripts : true

                       } // 通过autoLoad属性载入目标页,如果要用到脚本,必须加上scripts属性

                   });

     }

     contentPanel.setActiveTab(n);

}

 

?

?

2.????? 然后是init-house.js,这是最重要也是最复杂的一个JS文件了。这个JS里面涉及到Ext.Window Ext.FormPanelExt.grid.CheckboxSelectionModelExt.data.RecordExt.grid.ColumnModelExt.data.StoreExt.PagingToolbarExt.grid.GridPanelExt.MessageBoxExt.menu.Menu等众多重要的ExtJS控件,要知道它们之间的关系就要先了解我们要做的事!这个应用中,我们要完成的界面功能是在页面上显示一张表格(这张表格的列由ColumnModel决定,数据行由Store决定!),表格上方显示一排工具按钮,分别用来做添加,修改,删除,复制,导出等功能,下方显示分页栏来展现分页数据,表格里面还设置了行级的右键菜单,可以完成和上排工具按钮一样的功能。在表格之上,我们还放置了一个查询表单,来完成我们强大的信息检索功能。最后我们添加和修改数据的时候,都会弹出一个窗口,里面放置着添加或修改数据的表单。还有,当用户执行了不正确的操作时,要弹出相应的提示对话框。OK,怀着攻克难关的激情,我们来看看这1000行代码吧!

?

var ds;// 数据源
var grid;// 数据显示表格
var searchForm;// 查询表单
var form;//添加/修改的表单
var win;// 添加或修改窗口
var limit = 5;//每页显示的记录数
var ptb;// 分页控件
var TopicRecord;//记录对象
 
function getInsertForm() {
     
     form = new Ext.FormPanel({
         labelWidth : 100,
         monitorValid : true,// 把有formBind:true的按钮和验证绑定
         baseCls : 'x-plain',
         defaults : {
              width : 200
         },
         defaultType : 'textfield',// 默认字段类型
 
         // 定义表单元素
         items : [{
                       fieldLabel : '标题',
                       name : 'house.title',
                       allowBlank : false
                   }, {
                       fieldLabel : '租金',
                       name : 'house.hireprice'
                   }, {
                       fieldLabel : '联系人',
                       name : 'house.linkman'
                   }, {
                        fieldLabel : '联系电话',
                       name : 'house.linktel'
                   }, {
                       fieldLabel : '几室',
                       xtype : "combo",
                       hiddenName : "house.room",// 大家要注意的是hiddenName和name属性,name只是下拉列表的名称,作用是可通过,而hiddenName才是提交到后台的input的name。如果没有设置hiddenName,在后台是接收不到真正的值的。
                       store : new Ext.data.SimpleStore({
                                     fields : ['a', 'b'],
                                     data : [['1', '一'], ['2', '二'], ['3', '三']]
                                 }),
                       valueField : 'a',
                       displayField : 'b',
                       mode : 'local',
                       triggerAction : 'all',
                       forceSelection : true,
                       selectOnFocus : true,
                       editable : false,
                       readOnly : true,
                       emptyText : "无限制!"
                   }, {
                       fieldLabel : '几厅',
                       xtype : "combo",
                       hiddenName : "house.ting",// 大家要注意的是hiddenName和name属性,name只是下拉列表的名称,作用是可通过,而hiddenName才是提交到后台的input的name。如果没有设置hiddenName,在后台是接收不到真正的值的。
                       store : new Ext.data.SimpleStore({
                                     fields : ['a', 'b'],
                                     data : [['1', '一'], ['2', '二'], ['3', '三']]
                                 }),
                       valueField : 'a',
                       displayField : 'b',
                       mode : 'local',
                       triggerAction : 'all',
                       forceSelection : true,
                       selectOnFocus : true,
                       editable : false,
                       readOnly : true,
                       emptyText : "无限制!"
                   }, {
                       fieldLabel : "区域",
                       xtype : 'combo',
                       store : new Ext.data.SimpleStore({
                                     fields : ['id', 'name'],
                                     data : Ext.grid.areaComboBoxItems
                                 }),
                       valueField : "id",
                       displayField : "name",
                       mode : 'local',
                       forceSelection : true,// 必须选择一项
                       emptyText : '请选择区域...',// 默认值
                       name : "area",
                       hiddenName : "house.areaId",// hiddenName才是提交到后台的input的name
                       editable : false,// 不允许输入
                       triggerAction : 'all',// 因为这个下拉是只能选择的,所以一定要设置属性triggerAction为all,不然当你选择了某个选项后,你的下拉将只会出现匹配选项值文本的选择项,其它选择项是不会再显示了,这样你就不能更改其它选项了。
                       id : 'parent_id1',
                       name : 'parent1',
                       listeners : {
                            select : function(combo, record, index) {
                                 houseService.getAllStreets(combo.value, function(
                                          data) {
                                     if (data != null) {
                                          var list2 = [];
                                          for (var i = 0; i < data.length; i++) {
                                               list2[i] = [data[i].sid, data[i].sname];
                                          }
                                          Ext.getCmp('child_id1').clearValue();
                                          Ext.getCmp('child_id1').store
                                                   .loadData(list2);
                                     }
                                 });
 
                            }
                       }
                   }, {
                       fieldLabel : "街道",
                       xtype : 'combo',
                       store : new Ext.data.SimpleStore({
                                     fields : ['id', 'name'],
                                     data : []
                                 }),
                       valueField : "id",
                       displayField : "name",
                       // 数据是在本地
                       mode : 'local',
                       forceSelection : true,// 必须选择一项
                       emptyText : '请选择街道...',// 默认值
                       editable : false,// 不允许输入
                       triggerAction : 'all',// 因为这个下拉是只能选择的,所以一定要设置属性triggerAction为all,不然当你选择了某个选项后,你的下拉将只会出现匹配选项值文本的选择项,其它选择项是不会再显示了,这样你就不能更改其它选项了。
                       allowBlank : false,// 该选项值不能为空
                       id : 'child_id1',
                        name : "child1",
                       hiddenName : "house.streetId"
                   }, {
                       fieldLabel : '房屋设施',
                       xtype : 'textarea',
                       name : 'house.housething'
                   }],
         buttons : [{
              text : '保存',
              formBind : true,
              type : 'submit',
              // 定义表单提交事件
              handler : function() {
                   if (form.form.isValid()) {// 验证合法后使用加载进度条
                       // 提交到服务器操作
                       form.form.doAction('submit', {
                                     url : '../houseHandler.do?action=addHouse',// 文件路径
                                     method : 'post',// 提交方法post或get
                                     params : '',
                                     // 提交成功的回调函数
                                     failure : function(retForm, retAction) {
                                          if (retAction.result
                                                   && retAction.result == '1') {
                                               Ext.MessageBox.alert('提示', '保存数据成功!');
                                               win.hide();
                                               ptb.cursor=ptb.store.getTotalCount()+1-ptb.pageSize;
                                                                      ds.load({
                                                                           params : {
                                                                               start : ptb.cursor,
                                                                               limit : ptb.pageSize
                                                                           }
                                                                      });
 
                                          } else if (retAction.result
                                                   && retAction.result == 'error') {
                                               Ext.MessageBox.alert('提示', '保存数据失败!');
                                          } else {
                                               Ext.Msg.alert('错误', '服务器出现错误请稍后再试!');
                                          }
                                     },
                                     waitMsg : '保存数据...'
                                 });
                   }
              }
         }, {
              text : '取消',
              handler : function() {
                   form.form.reset();
              }// 重置表单
         }]
 
     });
     return form;
}
 
function getUpdateForm() {
     form = new Ext.FormPanel({
         labelWidth : 100,
         monitorValid : true,// 把有formBind:true的按钮和验证绑定
         baseCls : 'x-plain',
         defaults : {
              width : 200
         },
         defaultType : 'textfield',// 默认字段类型
 
         // 定义表单元素
         items : [{
                       fieldLabel : 'ID',
                       name : 'house.hid',
                       allowBlank : false,
                       readOnly : true
                   }, {
                       fieldLabel : '标题',
                       name : 'house.title',
                       allowBlank : false
                   }, {
                       fieldLabel : '租金',
                       name : 'house.hireprice'
                   }, {
                        fieldLabel : '联系人',
                       name : 'house.linkman'
                   }, {
                       fieldLabel : '联系电话',
                       name : 'house.linktel'
                   }, {
                       fieldLabel : '几室',
                       xtype : "combo",
                       hiddenName : "house.room",// 大家要注意的是hiddenName和name属性,name只是下拉列表的名称,作用是可通过,而hiddenName才是提交到后台的input的name。如果没有设置hiddenName,在后台是接收不到真正的值的。
                       store : new Ext.data.SimpleStore({
                                     fields : ['a', 'b'],
                                     data : [['1', '一'], ['2', '二'], ['3', '三']]
                                 }),
                       valueField : 'a',
                       displayField : 'b',
                       mode : 'local',
                       triggerAction : 'all',
                       forceSelection : true,
                       selectOnFocus : true,
                       editable : false,
                       readOnly : true,
                       emptyText : "无限制!"
                   }, {
                       fieldLabel : '几厅',
                       xtype : "combo",
                       hiddenName : "house.ting",// 大家要注意的是hiddenName和name属性,name只是下拉列表的名称,作用是可通过,而hiddenName才是提交到后台的input的name。如果没有设置hiddenName,在后台是接收不到真正的值的。
                       store : new Ext.data.SimpleStore({
                                     fields : ['a', 'b'],
                                     data : [['1', '一'], ['2', '二'], ['3', '三']]
                                 }),
                       valueField : 'a',
                       displayField : 'b',
                       mode : 'local',
                       triggerAction : 'all',
                       forceSelection : true,
                       selectOnFocus : true,
                       editable : false,
                       readOnly : true,
                       emptyText : "无限制!"
                   }, {
                       fieldLabel : "区域",
                       xtype : 'combo',
                       store : new Ext.data.SimpleStore({
                                     fields : ['id', 'name'],
                                     data : Ext.grid.areaComboBoxItems
                                 }),
                       valueField : "id",
                       displayField : "name",
                       mode : 'local',
                       forceSelection : true,// 必须选择一项
                       emptyText : '请选择区域...',// 默认值
                       name : "area",
                       hiddenName : "house.areaId",// hiddenName才是提交到后台的input的name
                       editable : false,// 不允许输入
                       triggerAction : 'all',// 因为这个下拉是只能选择的,所以一定要设置属性triggerAction为all,不然当你选择了某个选项后,你的下拉将只会出现匹配选项值文本的选择项,其它选择项是不会再显示了,这样你就不能更改其它选项了。
                       id : 'parent_id2',
                       name : 'parent2',
                       listeners : {
                            select : function(combo, record, index) {
                                 houseService.getAllStreets(combo.value, function(
                                          data) {
                                     if (data != null) {
                                          var list2 = [];
                                          for (var i = 0; i < data.length; i++) {
                                               list2[i] = [data[i].sid, data[i].sname];
                                          }
                                          Ext.getCmp('child_id2').clearValue();
                                          Ext.getCmp('child_id2').store
                                                   .loadData(list2);
                                     }
                                 });
 
                            }
                       }
                   }, {
                       fieldLabel : "街道",
                       xtype : 'combo',
                       store : new Ext.data.SimpleStore({
                                     fields : ['id', 'name'],
                                     data : []
                                 }),
                       valueField : "id",
                       displayField : "name",
                       // 数据是在本地
                       mode : 'local',
                       forceSelection : true,// 必须选择一项
                       emptyText : '请选择街道...',// 默认值
                       editable : false,// 不允许输入
                       triggerAction : 'all',// 因为这个下拉是只能选择的,所以一定要设置属性triggerAction为all,不然当你选择了某个选项后,你的下拉将只会出现匹配选项值文本的选择项,其它选择项是不会再显示了,这样你就不能更改其它选项了。
                       allowBlank : false,// 该选项值不能为空
                       id : 'child_id2',
                       name : "child2",
                       hiddenName : "house.streetId"
                   }, {
                       fieldLabel : '房屋设施',
                       xtype : 'textarea',
                       name : 'house.housething'
                   }],
         buttons : [{
              text : '修改',
              formBind : true,
              type : 'submit',
              // 定义表单提交事件
              handler : function() {
                   if (form.form.isValid()) {// 验证合法后使用加载进度条
                       // 提交到服务器操作
                       form.form.doAction('submit', {
                                     url : '../houseHandler.do?action=editHouse',// 文件路径
                                     method : 'post',// 提交方法post或get
                                     params : '',
                                     // 提交成功的回调函数
                                     failure : function(retForm, retAction) {
                                          if (retAction.result
                                                   && retAction.result == '1') {
                                               Ext.MessageBox.alert('提示', '更新数据成功!');
                                               win.hide();
                                                   ds.load({
                                                                           params : {
                                                                                start : ptb.cursor,
                                                                               limit : ptb.pageSize
                                                                           }
                                                                      });
                                          } else if (retAction.result
                                                   && retAction.result == 'error') {
                                               Ext.MessageBox.alert('提示', '更新数据失败!');
                                          } else {
                                              Ext.Msg.alert('错误', '服务器出现错误请稍后再试!');
                                          }
                                     },
                                     waitMsg : '更新数据...'
                                 });
                   }
              }
         }, {
              text : '取消',
              handler : function() {
                   form.form.reset();
              }// 重置表单
         }]
     });
     return form;
}
 
// 页面加载后执行的代码
Ext.onReady(function() {
              // get All unit Name for comboBox.
              houseService.getAllAreas(function(data) {
                            if (data != null) {
                                 var list = [];
                                 for (var i = 0; i < data.length; i++) {
                                     list[i] = [data[i].aid, data[i].aname];
                                 }
                                 Ext.grid.areaComboBoxItems = list;
                                 initData();
                            }
                       });
         });

?