Extjs5开发学习31加入模块和菜单定义4前台通过ajax来调用数据与展示.docx
- 文档编号:24118271
- 上传时间:2023-05-24
- 格式:DOCX
- 页数:9
- 大小:777.10KB
Extjs5开发学习31加入模块和菜单定义4前台通过ajax来调用数据与展示.docx
《Extjs5开发学习31加入模块和菜单定义4前台通过ajax来调用数据与展示.docx》由会员分享,可在线阅读,更多相关《Extjs5开发学习31加入模块和菜单定义4前台通过ajax来调用数据与展示.docx(9页珍藏版)》请在冰豆网上搜索。
Extjs5开发学习31加入模块和菜单定义4前台通过ajax来调用数据与展示
Extjs5开发学习-31-加入模块和菜单定义[4前台通过ajax来调用数据与展示]
上一节已经把到现在为止的后台做好了,启动tomcat,在浏览器中打入网址:
http:
//localhost:
8888/app/applicationinfo.do,就可以取得系统参数值。
下面看一下在chrome调试器中的结果。
到此为止,后台暂告一段落,又要开始对前台的extjs的程序进行修改了。
首先要修改的是MainModel.js,在此js文件中加入构造函数:
[javascript] viewplain copy
1.constructor :
function() {
2. Ext.log('MainModel constructor');
3. var me = this;
4. // 这一句是关键,如果没有的话,this还没有初始化完成,下面的Ext.apply(me.data,....)这句就会出错
5. this.callParent(arguments);
6. // 同步调用取得系统参数
7. Ext.Ajax.request({
8. url :
'applicationinfo.do',
9. async :
false, // 同步
10. success :
function(response) {
11. var text = response.responseText;
12. // 将字段串转换成本地变量
13. var applicationInfo = Ext.decode(text, true);
14. // 把从后台传过来的参数加入到data中去
15. Ext.apply(me.data, applicationInfo);
16. }
17. });
18.}
由于后台传送过来的data中的属性名称和原来写在data里的属性不一致,因此要修改Top.js和Bottom.js。
(数据库的表的字段我都是用tf_开头,只是为了区分这是一个数据库里的字段而己。
在看前台的代码时也能知道,所有tf_开头的变量都是从数库里读出来的)。
Top.js更改为如下:
[javascript] viewplain copy
1./**
2. * 系统主页的顶部区域,主要放置系统名称,菜单,和一些快捷按钮
3. */
4.Ext.define('app.view.main.region.Top', {
5.
6. extend :
'Ext.toolbar.Toolbar',
7.
8. alias :
'widget.maintop', // 定义了这个组件的xtype类型为maintop
9.
10. uses :
['app.ux.ButtonTransparent', 'app.view.main.menu.ButtonMainMenu',
11. 'app.view.main.menu.SettingMenu'],
12.
13. defaults :
{
14. xtype :
'buttontransparent'
15. },
16.
17. style :
'background-color :
#cde6c7',
18.
19. height :
40,
20.
21. items :
[{
22. xtype :
'image',
23. bind :
{ // 数据绑定到MainModel中data的system.iconUrl
24. hidden :
'{!
systemInfo.tf_iconUrl}', // 如果system.iconUrl未设置,则此image不显示
25. src :
'{systemInfo.tf_iconUrl}' // 根据system.iconUrl的设置来加载图片
26. }
27. }, {
28. xtype :
'label',
29. bind :
{
30. text :
'{systemInfo.tf_systemName}'
31. },
32. style :
'font-size:
20px;color:
blue;'
33. }, {
34. xtype :
'label',
35. style :
'color:
grey;',
36. bind :
{
37. text :
'({systemInfo.tf_systemVersion})'
38. }
39. }, '->', {
40. xtype :
'buttonmainmenu',
41. hidden :
true,
42. bind :
{
43. hidden :
'{!
isButtonMenu}'
44. }
45. }, ' ', ' ', {
46. text :
'首页',
47. glyph :
0xf015,
48. handler :
'onHomePageButtonClick'
49. }, {
50. xtype :
'settingmenu'
51. }, {
52. text :
'帮助',
53. glyph :
0xf059
54. }, {
55. text :
'关于',
56. glyph :
0xf06a
57. }, '->', '->', {
58. text :
'搜索',
59. glyph :
0xf002
60. }, {
61. text :
'注销',
62. glyph :
0xf011
63. }, {
64. glyph :
0xf102,
65. handler :
'hiddenTopBottom',
66. tooltip :
'隐藏顶部和底部区域',
67. disableMouseOver :
true
68. }]
69.
70. });
Button.js更改为如下:
[javascript] viewplain copy
1./**
2. * 系统主页的底部区域,主要放置用户单位信息,服务单位和服务人员信息
3. */
4.Ext.define('app.view.main.region.Bottom', {
5.
6. extend :
'Ext.toolbar.Toolbar',
7.
8. alias :
'widget.mainbottom',
9.
10. uses :
['app.ux.ButtonTransparent'],
11.
12. defaults :
{
13. xtype :
'buttontransparent'
14. },
15.
16. style :
'background-color :
#f6f5ec;',
17.
18. items :
[{
19. bind :
{
20. text :
'{userInfo.tf_userdwmc}'
21. },
22. glyph :
0xf0f7
23. }, {
24. bind :
{
25. text :
'{userInfo.tf_departmentName}'
26. }
27. }, {
28. bind :
{
29. text :
'用户:
{userInfo.tf_userName}'
30. },
31. glyph :
0xf007
32. }, '->', {
33. bind :
{
34. text :
'{serviceInfo.tf_serviceDepartment}'
35. },
36. glyph :
0xf059
37.
38. }, {
39. bind :
{
40. text :
'{serviceInfo.tf_serviceMen}'
41. }
42. }, {
43. bind :
{
44. text :
'{serviceInfo.tf_serviceTelnumber}'
45. },
46. glyph :
0xf095
47. }, {
48. bind :
{
49. hidden :
'{!
serviceInfo.tf_serviceEmail}', // 绑定值前面加!
表示取反,如果有email则不隐藏,如果email未设置,则隐藏
50. text :
'{serviceInfo.tf_serviceEmail}'
51. },
52. glyph :
0xf003,
53. handler :
function(button) {
54. // 发送邮件
55. var vm = button.up('app-main').getViewModel();
56. var link = "mailto:
" + vm.get('serviceInfo.tf_serviceEmail')
57. + "?
subject=" + vm.get('userInfo.tf_userdwmc')
58. + vm.get('userInfo.tf_userName') + " 关于 "
59. + vm.get('systemInfo.tf_systemName') + " 的咨询";
60. window.location.href = link;
61. }
62. }, {
63. bind :
{
64. text :
'©{serviceInfo.tf_copyrightOwner}'
65. }
66. }]
67. });
以过以上修改,就可以完成系统的top和 bottom中一些信息的更新的。
启动tomcat,在浏览器中打入:
http:
//localhost:
8888/app/,会生成如下界面:
其中的系统名称,用户单位及操作员,服务单位及联系方式都是从后台取过来的。
另外单击“电子邮件”那个链接,可以直接转到发送邮件的程序。
下一节中把菜单更新一下,发布源代码。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Extjs5 开发 学习 31 加入 模块 菜单 定义 前台 通过 ajax 调用 数据 展示