欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

关于ExtJS的工具栏动态添加按钮(从后台数据库读取信息)

程序员文章站 2022-07-12 15:30:59
...
我想在工具栏中动态添加按钮,至于添加什么按钮,则从后台数据库中读取信息。
//以下是工具栏按钮测试代码,生成JSON
        string json = "[{'id': '1','text':'测试1'},{'id':'2','text':'测试2'},{'id':'4','text':'测试3'}]";
json = "{'totalProperty':'3','result':" + json + "}";
our.(json);


ToolBar = function() {
2
3 Ext.Ajax.request({
4 url: 'rolegroup.aspx',
5 params: '',
6 method: 'POST',
7 success: function(response, options) {
8 //alert('success');
9 var rsp = Ext.util.JSON.decode(response.responseText);
10 var total = rsp.totalProperty;
11 //alert(total);
12 //alert(rsp.result[0].text);
13 var arrays = new Array(total);
14 for (var i = 0; i < total; i++) {
15 //arrays[i] = new Ext.Toolbar.Button({ text: rsp.result[i].text, iconCls: 'icon-home' });
16 arrays[i] = { text: rsp.result[i].text, iconCls: 'icon-home' };
17 if (i == (total - 1))
18 arr += '{text:' + rsp.result[i].text + '}'
19 else
20 arr += '{text:' + rsp.result[i].text + '},';
21 }
22 arr = '{[' + arr + ']}';
23 alert(arr);
24 //alert(arrays.length);
25 //alert(arrays[1]['text'] + ',' + arrays[1]['iconCls']);
26 var o = { items: arrays };
27 //Ext.apply(this, A, o); //不成功?
28 Ext.apply(this, o);
29 },
30 failure: function() {
31 Ext.Msg.alert("提示信息", "按钮加载失败,请稍后重试!");
32 }
33 });
34
35 ToolBar.superclass.constructor.call(this, {
36 id: 'tool_bar',
37 cls: 'top-toolbar',
38 })
39 };
40
41 Ext.extend(ToolBar, Ext.Toolbar);
42
43 //在后台创建toolbar = new ToolBar();


以上代码,arrays可以成功读取后台数据,但工具栏并不能显示出相应按钮。也就是说Ext.apply(this, o)并不成功!

事实上,Ajax是异步调用后台数据的,toolbar = new ToolBar()先运行了,但并没有同时立即运行读取后台数据的代码,而是滞后的。后来再运行Ext.apply(this, o)肯定不成功的。

我把代码改成以下所示:
SetToolButtons = function(tbr) {
2 Ext.Ajax.request({
3 url: 'rolegroup.aspx',
4 params: '',
5 method: 'POST',
6 success: function(response, options) {
7 var rsp = Ext.util.JSON.decode(response.responseText);
8 var total = rsp.totalProperty;
9 var arrays = new Array(total);
10 for (var i = 0; i < total; i++) {
11 arrays[i] = new Ext.Toolbar.Button({ text: rsp.result[i].text, iconCls: 'icon-home' });
12 }
13 tbr.add(arrays);
14 tbr.addFill();
15 tbr.addButton(
16 {
17 text: '我的桌面',
18 iconCls: 'icon-desktop',
19 scope: this
20 });
21 tbr.addSeparator();
22 tbr.addButton([
23 {
24 text: '重新登录',
25 iconCls: 'icon-user'
26 },
27 {
28 text: '退出系统',
29 iconCls: 'icon-exit'
30 }]);
31 },
32 failure: function() {
33 Ext.Msg.alert("提示信息", "按钮加载失败,请稍后重试!");
34 }
35 });
36 };
37
38 Ext.onReady(function() {
39 Ext.QuickTips.init();
40 var toolbar = new Ext.Toolbar({
41 id: 'tool_bar',
42 cls: 'top-toolbar'
43 });
44 SetToolButtons(toolbar);
45 }
46
相关标签: EXT json Ajax