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

我想在工具栏中动态添加按钮，至于添加什么按钮，则从后台数据库中读取信息。

后台代码（C#）

//以下是工具栏按钮测试代码，生成JSON
string json = "[{'id': '1','text':'测试1'},{'id':'2','text':'测试2'},{'id':'4','text':'测试3'}]";
json = "{'totalProperty':'3','result':" + json + "}";
Response.Write(json);

但JS怎么写呢？这个问题困扰了我很久。开始写了以下代码，但不成功：

1 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)肯定不成功的。

我把代码改成以下所示：

1 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

先创建好工具栏，我再添加按钮，而且是一次性添加好。结果运行成功！

我查了许多网友提供的资料，结合大家的思路，才有以上代码，在此衷心感谢广大网友！

希望本文对大家有帮助！