`
qinya06
  • 浏览: 596297 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

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

阅读更多
我想在工具栏中动态添加按钮,至于添加什么按钮,则从后台数据库中读取信息。
//以下是工具栏按钮测试代码,生成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 
分享到:
评论

相关推荐

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

    在本文档中,我们将探讨如何动态地从后台数据库读取信息来创建和添加这些按钮到ExtJS的工具栏中。这是一项实用的技术,能够根据用户的权限或者特定的业务场景动态调整用户界面。 首先,我们需要理解ExtJS中的工具栏...

    ExtJS工具栏

    接着,可以使用`add()`方法向工具栏添加按钮。例如,以下代码创建了一个包含四个按钮的工具栏: ```javascript Ext.onReady(function(){ var tb = new Ext.Toolbar(); tb.render('toolbar'); tb.add({ text: ...

    ExtJs的resultGrids中动态添加按钮

    本文将深入探讨如何在ExtJS的`resultGrids`中动态添加按钮,并结合`SuserInfoRes_js.jsp`文件名称推测可能的实现方法。 动态添加按钮在很多情况下非常有用,比如在表格数据加载后根据特定条件显示或隐藏操作按钮,...

    Extjs和后台数据库交互的程序,增删改查

    在“Extjs和后台数据库交互的程序,增删改查”项目中,我们将探讨如何利用ExtJS与后台数据库进行数据的添加、删除、修改和查询操作。 1. **ExtJS的数据模型(Model)** 在ExtJS中,数据模型定义了对象的结构,包括...

    ExtJs 动态添加表单

    在"动态添加表单"这个主题中,我们将深入探讨如何在ExtJS中实现表单的动态创建和管理。 首先,我们要理解表单(Form)在ExtJS中的基本概念。表单是数据输入和验证的核心组件,可以包含各种字段类型,如文本框、下拉...

    extjs动态生成表格,前台+后台

    在本文中,我们将深入探讨如何使用ExtJS框架在前端动态生成表格,并结合后端数据进行展示。ExtJS是一个强大的JavaScript库,专用于构建富客户端Web应用程序,尤其在创建交互式用户界面方面表现突出。动态生成表格是...

    extjs4.2 动态生成toolbar

    在 ExtJS 4.2 中实现动态生成 Toolbar,以满足 gridPanel 中动态生成带按钮及查询条件的工具栏的需求。本文将详细介绍如何实现动态生成 Toolbar,包括视图层、 Toolbar.js 和后台调用创建工具栏的方法。 视图层 在...

    extjs和数据库的后台交互

    在ExtJS中,与后台数据库进行交互通常涉及到Ajax技术、JSON格式数据以及服务器端的数据处理。 1. **Ajax技术**:Ajax(Asynchronous JavaScript and XML)允许在不刷新整个页面的情况下与服务器进行数据交换。在...

    Extjs 超级工具栏图标

    在EXTJS框架中,超级工具栏(Super Toolbar)是一种高度可定制的组件,它允许开发者在页面顶部创建一排或多排功能丰富的按钮、下拉菜单和分隔符,以实现各种用户交互操作。这些工具栏通常包含图标,使得用户能够快速...

    Extjs 动态树 数据库

    **ExtJS动态树与数据库交互详解** 在Web开发中,数据可视化是不可或缺的一部分,而树形结构作为一种层次清晰、组织有序的数据展现方式,被广泛应用于菜单系统、文件目录、组织架构等场景。ExtJS,一个强大的...

    Extjs panel里添加checkboxgrop后台动态获取数据

    Extjs checkboxgrop动态获取后台数据,并默认为全选状态

    extjs上方动态导航栏

    在ExtJS中,上方的动态导航栏(通常称为Header或Toolbar)是一种常见的组件,用于展示应用的菜单、按钮、下拉框等交互元素,用户可以根据需求动态加载和更新。本篇文章将深入探讨如何在ExtJS中创建并实现上方动态...

    Extjs和数据库交互,增删改查

    ExtJS 是一个强大的JavaScript 框架,专用于构建富客户端Web应用。它提供了一整套组件、工具和API,使开发者能够创建功能丰富的、交互性强的用户界面。在与数据库进行交互时,ExtJS 通常结合服务器端的技术,如PHP、...

    extjs动态表格实例(封装GRID,从STRUTS2读取后台数据 )

    在这个"extjs动态表格实例"中,我们将探讨如何使用ExtJS封装Grid并从Struts2框架的后台获取数据。 首先,让我们了解ExtJS中的Grid组件。Grid是ExtJS的一个关键组件,它用于展示结构化数据,并支持多种操作,如排序...

    ExtJS如何自定义图片按钮组件

    1.ExtJS自定义组件,图片按钮为例. 2.此图片按钮背景完全为图片,没有边框,需要使用者提供2张图片,一张初始化用,一张点击后用,可在'imgPaths:'属性里填写,格式为'01.jpg~02.jpg' 3.解压后请将所有附件放置您extjs...

    Extjs教程_第四章_按钮、菜单和工具栏(2)

    总结,EXTJS的按钮、菜单和工具栏提供了丰富的功能,包括快捷方式、图标按钮、操作函数、菜单交互以及表单字段等,它们是构建动态、交互性强的Web应用程序的重要组成部分。通过灵活配置和自定义,开发者可以创建出...

    ExtJs动态grid的生成

    - Grid的顶部通常包含一个工具栏,可以动态添加按钮或其他UI元素,提供搜索、排序或过滤等功能。这些功能可以通过`dockedItems`配置项实现。 6. **Autogrid.js可能的用途** - 文件名"Autogrid.js"暗示可能是一个...

    使用java,extjs,配合后台oracle数据库的代码框架

    使用java,extjs,配合后台oracle数据库的代码框架,这段代码是extjs的grid的一个详细案例使用java,extjs,配合后台oracle数据库的代码框架,这段代码是extjs的grid的一个详细案例使用java,extjs,配合后台oracle...

    ExtJs做的用户登陆!ASP后台

    ASP后台"这个主题中,我们将深入探讨如何使用ExtJS实现前端用户登录界面,并结合ASP(Active Server Pages)作为后台处理登录逻辑。 首先,让我们了解一下ExtJS中的用户登录界面构建。通常,登录界面会包含用户名和...

Global site tag (gtag.js) - Google Analytics