关于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 

 

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

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

希望本文对大家有帮助！