`
xxtao110
  • 浏览: 3021 次
  • 性别: Icon_minigender_1
  • 来自: 成都
最近访客 更多访客>>
文章分类
社区版块
存档分类

Ext GridPanel 使用ajax取得数据并显示的实例----注:自己摸索的

阅读更多

最近用Ext做了个web前端,觉得Ext界面很炫,就自己查资料学习了一下,小小的完成了当前的任务。

下面便是主要代码:

这个store是相当于是个数据源吧,后面会有把这个store与GridPanel绑定的代码,他的作用是为GridPanel取得数据。

-----个人理解

this.store1 = new Ext.data.Store({ 

            //和普通Ext。AJAX不一样的是他的参数是这种方式的,以前我把参数写在PROXY里面的,结果老是发不出去。
            baseParams :{
                logTypeP : 'kong',
                timeEnableP : 'kong',
                startTimeP : 'kong',
                endTimeP : 'kong',
                pageIndex : '1'               
            },

           //这里便是你连接的信息了proxy貌似是store里必须的的参数  ----个人见解
            proxy : new Ext.data.HttpProxy( {
                timeout : 30000,
                url :"http://localhost:8080/extwindw/servlet/Ext",
                method : 'POST',
                async: false,               
                success : function(response,options) {
                    var x = Ext.getCmp('gridPanel1');
                    x.body.unmask();         //后面会有个载入中的效果,这里是当得到我们需要的东西之后便将载入中的效果取消掉
                    //Ext.Ajax.request(options);
                },
                failure : function(response,options) {   //失败则会询问是否需要重新请求,
                    var x = Ext.getCmp('gridPanel1');
                    x.body.unmask();
                    Ext.Msg.confirm('发送失败','是否要重新发送',
                         function(btn){ 
                if (btn == 'yes') { 
                     Ext.Ajax.request(options);     //这句便是重新请求
              } 
          }) 
                }
            }),
            reader : new Ext.data.JsonReader({       //我使用的事json格式来回传数据,在json里我会回传一个total项,里面保存我所查询出的所有数据的条数,这方便下面的bbar进行分页,如果你不回传这个参数,那么bbar则会认为你所查询出的数据条数就是你所回传的数据条数。  record则是保存回传的详细信息,在用了分页显示的情况下我不会将我所有的数据回传到页面上。
                totalProperty:'total',
                root:'record'
            }, [
                {name: 'log_id',mapping: 'log_id',defaltValue:'1'},           //name对应的事json数据里面的name,这里还可以为数据指定格式,我这里都是默认的String
          {name: 'log_type'},
          {name: 'device_IP'},
          {name: 'username'},
          {name: 'record_time'},
          {name: 'log_detail'}
      ])
        });
        this.store1.load({params:{start:0,limit:10}});    //这句对分页很关键,这里本来可以填4个参数,我这用了两个,start表示分页时你取数据时从哪开始,limit表示每页多少个,当然这里需要服务器来配合,服务器会接受到Start参数和limit参数,然后由他进行数据组织什么的。

        this.gridPanel1 = new Ext.grid.GridPanel({
            id : 'gridPanel1',
            store : this.store1,  //把store与gridpanel关联
            region : "center",
        bodyStyle:'width:100%',
        autoWidth:true,
        columnLines: true,
            selModel : new Ext.grid.RowSelectionModel({}),
            layout : 'fit',
            autoExpandColumn:5,

//名字与名字对应  就能显示数据了
            columns : [{
                hidden : false,
                header : "ID",
                dataIndex : "log_id",
                sortable : true
            }, {
                hidden : false,
                header : "日志类型",
                dataIndex : "log_type",
                sortable : true
            }, {
                hidden : false,
                header : "设备IP",
                dataIndex : "device_IP",
                sortable : true
            }, {
                hidden : false,
                header : "用户名",
                dataIndex : "username",
                sortable : true
            }, {
                hidden : false,
                header : "记录时间",
                dataIndex : "record_time",
                sortable : true
            }, {
                hidden : false,
                header : "详细描述",
                dataIndex : "log_detail",
                sortable : true
            }],

//这个事件是其他应用的,无关紧要
            listeners : {
                click : {
                    fn : function(component) {
                        var test = Ext.getCmp('logTypeTree');
                      var grid = Ext.getCmp('gridPanel1');
                        var selectRow = grid.getSelectionModel().getSelected();
                        if(selectRow){
                                Ext.getCmp('south').body.dom.innerHTML = selectRow.data.log_detail;
                        }
                    }.createDelegate(this)
                }
            },

//这便是显示在下方的分页控件了,如果你嫌在下面不好看  你可以把bbar改为tbar这样便显示在上面了。他也要与store关联,beforeload是我写来给我的查询条件填充数据的。
            bbar : new Ext.PagingToolbar({
                id : 'paging',
                displayMsg : "Displaying {0} - {1} of {2}",
                store : this.store1,
                xtype : "paging",
                pageSize : 10,
                emptyMsg : "No data to display",
                beforeLoad : function(){
                    if(Ext.getCmp('timeEnable')){                       
                        this.store.baseParams.timeEnableP = Ext.getCmp('timeEnable').getValue();
                    }
                   
                    if(Ext.get('startTime')){
                        this.store.baseParams.startTimeP = Ext.get('startTime').getValue();
                    }
                   
                    if(Ext.get('endTime')){
                        this.store.baseParams.endTimeP = Ext.get('endTime').getValue();
                    }                   
                    if(Ext.getCmp('logTypeTree')){   
                        var cheData = Ext.getCmp('logTypeTree').getChecked();                   
                        var logType = '';
                        for ( var i = 0; i < cheData.length; i++) {
                                    if(i==0){
                                        logType = cheData[i].attributes.menuid;
                                    }else{
                                        logType = logType+"||"+cheData[i].attributes.menuid;
                                }
                        };
                        this.store.baseParams.logTypeP = logType;
                    }
                    var x = Ext.getCmp('gridPanel1');
                    x.body.mask("载入中...", 'x-mask-loading');  //这个便是显示载入中效果语句,如果我在success里没有使用unmask的话,它会一直存在。
                }
            })
        });

 

写完啦第一篇开发日记。不知道是否有人会看到,并觉得这会对他有点帮助?不过即使没有也没什么,完全自娱自乐。

0
3
分享到:
评论
1 楼 xxtao110 2010-09-26  

相关推荐

    ExtJS 表格面板GridPanel完整例子

    在本文中,我们将深入探讨如何创建并使用一个完整的ExtJS GridPanel实例,以及与其相关的源码和工具。 首先,让我们理解GridPanel的基本结构。GridPanel通常由以下几个主要部分组成: 1. **Store**: 存储数据的...

    Ext 3.0源码+典型实例

    在 Ext 3.0 中,可以使用 GridPanel 显示数据,结合 Store 和 Proxy 实现数据的加载和筛选。同时,可以添加过滤器(Filter)或使用远程排序(remoteSort)来处理查询逻辑。 4. **动态树形菜单**:动态树形菜单是...

    ext 实例

    在留言板应用中,可以使用`Store`对象存储留言数据,并将其绑定到`GridPanel`,动态显示新的留言。 4. **AJAX交互**:EXT通过`Ajax`类提供异步数据通信。在本实例中,提交表单时,EXT会使用AJAX调用JSP后端服务,...

    ext_ext_knew7pi_ajax_

    在`knew7pi`这个标签中,可能是指某个个人或团队对EXT 1.1的深入理解和实践,他们分享了一些关于EXT AJAX的实例,包括如何使用EXT组件(如GridPanel、Menu和Window)与服务器进行AJAX交互,实现动态内容展示和用户...

    ExtDesigner中用jsonstore给girdpanel绑定数据

    在GridPanel中,JsonStore常被用来实时更新数据显示,使得用户界面能动态响应数据变化。 描述中提到的博文链接指向了iteye博客的一个条目,虽然具体内容没有给出,但通常博主会详细介绍如何配置JsonStore,如何定义...

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

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

    JavaScript的Ext JS框架中的GridPanel组件使用指南

    JavaScript的Ext JS框架中的GridPanel组件是一个强大的表格展示和管理工具,它允许开发者高效地处理大量数据,并提供了诸如数据排序、分组、编辑等多种功能。GridPanel与TreePanel虽然都有表格展示的功能,但...

    Ext.Net1.0(Examples)RC2实例

    3. **Ajax交互**:使用Ext.NET,你可以创建无刷新的页面,通过Ajax技术实现页面部分的动态更新,提升用户体验。 4. **事件处理**:每个组件都有一系列的事件,如点击(click)、加载(load)等,开发者可以通过.NET...

    ext 结合 asp.net 实例

    2. **EXT.NET控件**:EXT.NET提供了多种服务器控件,如`ExtPanel`(面板)、`ExtGridPanel`(表格)、`ExtForm`(表单)等。你可以像使用ASP.NET内置控件一样,在ASPX页面上直接添加这些控件,并通过属性来设置它们...

    ext2.2demo

    1. 新闻列表展示:EXT2.2的GridPanel组件展示新闻列表,数据通过AJAX从服务器获取,用户可以筛选、排序和分页查看。 2. 新闻详情查看:点击新闻列表项,EXT2.2可能使用Ajax.load方法异步加载新闻详情,显示在一个新...

    Ext 根据数据库返回json动态生成grid列表实例

    在本文中,我们将深入探讨如何使用ExtJS框架根据数据库返回的JSON数据动态生成Grid列表实例。ExtJS是一款强大的JavaScript库,常用于构建富客户端应用程序,尤其是数据可视化和数据管理组件,如Grid。Grid是ExtJS中...

    EXT js 实例 学生成绩管理

    在学生成绩管理实例中,我们可能需要使用 GridPanel 显示成绩,FormPanel 用于输入和编辑数据,Button 用于触发操作,Toolbar 可能包含搜索、排序和过滤功能。 6. **布局(Layouts)**:EXT JS 的布局管理器可以...

    Ext 完整例子(含Excel导出)

    - Ajax通信:使用Ext.Ajax或Ext.data.proxy.Ajax与服务器交互。 - 数据模型和存储:了解如何定义模型(Ext.data.Model)和使用Store来管理数据。 - Excel生成库:可能使用Apache POI等Java库来生成Excel文件。 - MVC...

    EXT4 自己整理的一些常用方法

    EXT4的GridPanel提供了丰富的API,可以定制各种复杂的数据展示和交互需求。 2. **Function**: 这个部分可能包含EXT4中各种函数的实现,比如数据处理函数、事件处理函数、表单验证函数等。EXT4支持面向对象的编程...

    ext-2.0.2-aspx-only-aspx-examples

    6. **AJAX交互**: 了解如何利用ExtJS的Ajax组件(如Ext.Ajax或Ext.data.Connection)与ASP.NET Web服务或PageMethods进行异步通信。 7. **用户界面组件**: 分析不同类型的组件(如按钮、表格、表单、菜单等)的使用...

    Ext 表单示例演示 视频

    2. 加载XML文件:使用Ajax请求或本地读取XML文件,然后用XMLReader解析数据。 3. 创建Store:将解析后的数据保存到Store中。 4. 创建GridPanel:定义列模型,设置Store,创建GridPanel实例。 5. 渲染GridPanel:将...

    Ext.net 的MVC2实例代码

    1. **EXT.NET控件的使用**:例如,EXT.NET GridPanel可以用来显示和编辑数据,它支持分页、排序、过滤等功能。还有Window和Form组件,用于弹出对话框和用户输入。 2. **数据绑定**:EXT.NET控件可以直接绑定到...

    最新extaspnet实例

    在实例中,可以看到如何使用EXT.NET的AJAX功能进行异步操作,如无刷新加载数据、动态添加删除记录等。 6. 自定义组件:EXT.NET允许开发人员自定义控件,扩展其功能。通过继承现有控件并覆盖其方法,可以创建满足...

Global site tag (gtag.js) - Google Analytics