Extjs5开发学习-31-加入模块和菜单定义[4前台通过ajax来调用数据与展示]教程.docx

Extjs5开发学习-31-加入模块和菜单定义[4前台通过ajax来调用数据与展示] 上一节已经把到现在为止的后台做好了，启动tomcat ,在浏览器中打入网址：http://localhost:8888/app/applicationinfo.do，就可以取得系统参数值。下面看一下在chrome调试器中的结果。 ? ? ? ? 到此为止，后台暂告一段落，又要开始对前台的extjs的程序进行修改了。 ? ? ? ? 首先要修改的是MainModel.js,在此js文件中加入构造函数： [javascript]? HYPERLINK /jfok/article/details\o view plain view plain? HYPERLINK /jfok/article/details\o copy \t _blank copy ? constructor?:?function()?{?? ????Ext.log(MainModel?constructor);?? ????var?me?=?this;?? ????//?这一句是关键，如果没有的话，this还没有初始化完成,下面的Ext.apply(me.data,)这句就会出错?? ????this.callParent(arguments);??? ????//?同步调用取得系统参数?? ????Ext.Ajax.request({?? ????????????????url?:?applicationinfo.do,?? ????????????????async?:?false,?//?同步?? ????????????????success?:?function(response)?{?? ????????????????????var?text?=?response.responseText;?? ????????????????????//?将字段串转换成本地变量?? ????????????????????var?applicationInfo?=?Ext.decode(text,?true);?? ????????????????????//?把从后台传过来的参数加入到data中去?? ????????????????????Ext.apply(me.data,?applicationInfo);?? ????????????????}?? ????????????});?? }?? ? ? ? ? 由于后台传送过来的data中的属性名称和原来写在data里的属性不一致，因此要修改Top.js和Bottom.js。（数据库的表的字段我都是用tf_开头，只是为了区分这是一个数据库里的字段而己。在看前台的代码时也能知道，所有tf_开头的变量都是从数库里读出来的）。 ? ? ? ? Top.js更改为如下： [javascript]? HYPERLINK /jfok/article/details\o view plain view plain? HYPERLINK /jfok/article/details\o copy \t _blank copy ? /**? ?*?系统主页的顶部区域，主要放置系统名称，菜单，和一些快捷按钮? ?*/?? Ext.define(app.view.main.region.Top,?{?? ?? ????????????extend?:?Ext.toolbar.Toolbar,?? ?? ????????????alias?:?widget.maintop,?//?定义了这个组件的xtype类型为maintop?? ?? ????????????uses?:?[app.ux.ButtonTransparent,?app.view.main.menu.ButtonMainMenu,?? ????????????????????app.view.main.menu.SettingMenu],?? ?? ????????????defaults?:?{?? ????????????????xtype?:?buttontransparent?? ????????????},?? ?? ????????????style?:?background-color?:?#cde6c7,?? ?? ????????????height?:?40,?? ?? ????????????items?:?[{?? ????????????????????????xtype?:?image,?? ????????????????????????bind?