`
Fangrn
  • 浏览: 822656 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Extjs-RowExpander 的异步调用

阅读更多

RowExpander是Extjs中grid的一个插件,可以在一行下再展现数据。实现了非常方便的parent-detail的效果。

1.加入mousedown事件处理

if (Ext.ux.grid.RowExpander) {
    Ext.apply(Ext.ux.grid.RowExpander.prototype, {
     getDataFn : null,
     onMouseDown : function(e, t) {

      if (t.className == 'x-grid3-row-expander') {
       e.stopEvent();
       var row = e.getTarget('.x-grid3-row');
       var viewRow = row;
       if (typeof viewRow == 'number') {
        viewRow = this.grid.view.getRow(viewRow);
       }
       var record = this.grid.store
         .getAt(viewRow.rowIndex);
       if (!record.data.checkSignerInvoicess) {

        var mark= new Ext.LoadMask(Ext.getBody(), {
         msg : 'Loading data...',
         removeMask : true
        });
        mk.show();
        this.getDataFn (record, this,
          function(expander) {
           // 展开该行
          expander.toggleRow(viewRow.rowIndex);
          mark.hide();
         });

        return;
       }
       this.toggleRow(row);
      }
     }
    });
   }

 2.制作获取数据函数

function GetInvoices(record, expander, callback) {
    Ext.Ajax.request( {
     url : 'getDetailInvoices.json',
     params : {
      'chkNo' : record.data.chkNo,
      'vendorNo' : record.data.vendNo
     },
     success : function(response) {
      var data = Ext.decode(response.responseText);
      if (!data.success) {
       showError(data.message, checkBooks);
       return true;
      }
      // 设置模板中所需要的record数据,并展开该行
     record.data.checkSignerInvoicess = data.records;
     record.commit();

     if (callback) {
      callback(expander);// 一定要回调该函数,否则不能展开
    }
   },
   failure : function() {
    if (callback) {
     callback(expander);
    }
   }
    })
   }
   ;

 3.制作expander

var expander = new Ext.ux.grid.RowExpander(
     {

      tpl : new Ext.XTemplate(

        '<div class="x-grid-group-title" style="margin-left:10%">',
        '<table class="x-grid3-row-table" cellspacing="0" cellpadding="0" border="0" >',
        '<thead>',
        ' <tr class="x-grid3-hd-row"><td  class="x-grid3-hd x-grid3-cell x-grid3-td-11" >seqNo</td> <td  class="x-grid3-hd x-grid3-cell x-grid3-td-11" >status</td> <td  class="x-grid3-hd x-grid3-cell x-grid3-td-11" >amt</td> <td  class="x-grid3-hd x-grid3-cell x-grid3-td-11" >discAmt</td> <td  class="x-grid3-hd x-grid3-cell x-grid3-td-11" >payAmt</td> <td  class="x-grid3-hd x-grid3-cell x-grid3-td-11" >vendNo</td> <td  class="x-grid3-hd x-grid3-cell x-grid3-td-11" >cashAcctCurrCd</td> <td  class="x-grid3-hd x-grid3-cell x-grid3-td-11" >altVendNo</td> </tr>',
        '</thead>',

        '<tpl for="checkSignerInvoicess">',
        '<tr><td>{seqNo}</td> <td>{status}</td> <td>{amt}</td> <td>{discAmt}</td> <td>{payAmt}</td> <td>{vendNo}</td> <td>{cashAcctCurrCd}</td> <td>{altVendNo}</td></tr>',
        '</tpl>', '</table>', '</div>'),
      lazyRender : true,
      getDataFn : GetInvoices
     // 注册回调函数
     });

 4.使用expand

//column中
var columns = new Ext.grid.ColumnModel( [
     new Ext.grid.RowNumberer(), sm, expander, {

//grid中
var grid = new Ext.grid.GridPanel( {
    title : 'Payment Information',
    renderTo : 'my-tabs',
    store : initalStore,
    cm : columns,
    sm : sm,
    plugins : expander,

 5.效果

  • 大小: 101.1 KB
分享到:
评论

相关推荐

    轻松搞定Extjs

    - **Ajax文件上传**: 展示了如何使用Extjs实现文件的异步上传功能。 #### 分页与ComboBox 分页功能对于处理大量数据时非常关键,本章节详细介绍了如何实现数据分页。 - **关于分页**: 强调了分页在数据展示中的...

    Extjs中文教程

    ### Extjs中文教程知识点梳理 #### 一、Extjs简介及环境搭建 - **Extjs**是一种基于JavaScript的开源框架,用于构建现代化的Web应用程序。它提供了丰富的UI组件库、强大的数据处理能力和灵活的布局管理机制。 - **...

    大数据处理领域:Elasticsearch的高级应用及优化技巧

    内容概要:Elasticsearch是一款强大且灵活的搜索和数据分析工具。文中介绍了其核心技术如分布式存储、实时搜索、全文检索、数据分析等。通过对基础概念的学习,如索引、文档、类型、映射的理解,结合实战案例解析,重点展示了Elasticsearch在电商业务商品搜索引擎构建以及高效日志管理系统部署方面的实际运用方法和技术细节。此外,围绕性能优化展开了讨论,强调了诸如合理的分片和副本配置、有效运用内部缓存机制和精心规划集群资源配置等一系列措施的重要性。 适合人群:从事IT行业的中级及以上技术水平从业者,尤其是那些负责大数据处理、分布式系统的架构师及工程师。 使用场景及目标:①希望掌握利用Elasticsearch快速实现高效的搜索与分析应用的方法论和技术路径;②旨在通过实例学习到针对不同应用场景(如电商网站、日志分析)如何正确配置系统参数、优化集群表现,进而达成更好的用户体验或运营效率;③寻求提升系统稳定性、可靠性并解决可能出现的问题。 其他说明:本文不仅仅讲述了理论知识,还有详实的具体操作指南,帮助读者在实践中深入理解Elasticsearch的能力,并鼓励他们在自己的项目中积极探索更

    基于Matlab的双三方演化博弈与Lotka-Volterra模型稳定点分析、相位图绘制与仿真代码实现,基于Matlab的双三方演化博弈与Lotka-Volterra模型:稳定点分析、相位图绘制与仿真

    基于Matlab的双三方演化博弈与Lotka-Volterra模型稳定点分析、相位图绘制与仿真代码实现,基于Matlab的双三方演化博弈与Lotka-Volterra模型:稳定点分析、相位图绘制与仿真代码实践,matlab:双或三方演化博弈,lotka-Volterra 1.双方演化博弈:代分析稳定点分析,代绘制相位图,matlab仿真图代码 2.三方演化博弈:代分析稳定点分析,代绘制相位图,matlab仿真图代码3.lotka-Volterra模型 ,核心关键词:Matlab; 双或三方演化博弈; 稳定点分析; 相位图; 仿真图代码; Lotka-Volterra模型,MATLAB仿真:双三方演化博弈与Lotka-Volterra模型的稳定点分析与相位图绘制

    基于词袋模型及神经网络的文本分类算法新版源码+说明+数据

    【资源介绍】 1、该资源包括项目的全部源码,下载可以直接使用! 2、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业和毕设项目,也可以作为小白实战演练和初期项目立项演示的重要参考借鉴资料。 3、本资源作为“学习资料”如果需要实现其他功能,需要能看懂代码,并且热爱钻研和多多调试实践。 基于词袋模型及神经网络的文本分类算法新版源码+说明+数据.zip 基于词袋模型及神经网络的文本分类算法新版源码+说明+数据.zip 基于词袋模型及神经网络的文本分类算法新版源码+说明+数据.zip 基于词袋模型及神经网络的文本分类算法新版源码+说明+数据.zip 基于词袋模型及神经网络的文本分类算法新版源码+说明+数据.zip 基于词袋模型及神经网络的文本分类算法新版源码+说明+数据.zip 基于词袋模型及神经网络的文本分类算法新版源码+说明+数据.zip 基于词袋模型及神经网络的文本分类算法新版源码+说明+数据.zip 基于词袋模型及神经网络的文本分类算法新版源码+说明+数据.zip 基于词袋模型及神经网络的文本分类算法新版源码+说明+数据.zip 基于词袋模型及神经网络的文本分类算法新版源码+说明+数据.zip 基于词袋模型及神经网络的文本分类算法新版源码+说明+数据.zip

    【车间调度】基于matlab人工蜂群算法ABC求解分布式置换流水车间调度DPFSP【含Matlab源码 6166期】.mp4

    海神之光上传的视频是由对应的完整代码运行得来的,完整代码皆可运行,亲测可用,适合小白; 1、从视频里可见完整代码的内容 主函数:main.m; 调用函数:其他m文件;无需运行 运行结果效果图; 2、代码运行版本 Matlab 2019b;若运行有误,根据提示修改;若不会,私信博主; 3、运行操作步骤 步骤一:将所有文件放到Matlab的当前文件夹中; 步骤二:双击打开main.m文件; 步骤三:点击运行,等程序运行完得到结果; 4、仿真咨询 如需其他服务,可私信博主; 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作

    【多普勒雷达】基于matlab风力涡轮机多普勒雷达仿真模型【含Matlab源码 9813期】.mp4

    海神之光上传的视频是由对应的完整代码运行得来的,完整代码皆可运行,亲测可用,适合小白; 1、从视频里可见完整代码的内容 主函数:main.m; 调用函数:其他m文件;无需运行 运行结果效果图; 2、代码运行版本 Matlab 2019b;若运行有误,根据提示修改;若不会,私信博主; 3、运行操作步骤 步骤一:将所有文件放到Matlab的当前文件夹中; 步骤二:双击打开main.m文件; 步骤三:点击运行,等程序运行完得到结果; 4、仿真咨询 如需其他服务,可私信博主; 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作

    COMSOL模拟放电电极击穿空气过程:电场分布与击穿间隙电压计算分析,COMSOL模拟放电电极击穿空气过程:电场分布与击穿间隙电压计算分析,comsol放电电极击穿空气模拟,计算击穿间隙的电压,周围附

    COMSOL模拟放电电极击穿空气过程:电场分布与击穿间隙电压计算分析,COMSOL模拟放电电极击穿空气过程:电场分布与击穿间隙电压计算分析,comsol放电电极击穿空气模拟,计算击穿间隙的电压,周围附近的电场 ,关键词:COMSOL放电电极;击穿空气模拟;计算;击穿间隙电压;周围附近电场;电场分布。,COMSOL模拟放电电极击穿空气过程,计算电压与电场分布分析

    高压柔性输电系统:6脉冲与12脉冲晶闸管控制的HVDC仿真模型详细说明文档,高压柔性输电系统:6脉冲与12脉冲晶闸管控制的HVDC仿真模型详解说明文档,高压柔性输电系统6脉冲,12脉冲晶闸管控制HVD

    高压柔性输电系统:6脉冲与12脉冲晶闸管控制的HVDC仿真模型详细说明文档,高压柔性输电系统:6脉冲与12脉冲晶闸管控制的HVDC仿真模型详解说明文档,高压柔性输电系统6脉冲,12脉冲晶闸管控制HVDC的仿真模型,说明文档 ,高压柔性输电系统; 6脉冲HVDC; 12脉冲晶闸管控制; 仿真模型; 说明文档,高压柔性输电系统仿真模型:6/12脉冲晶闸管控制HVDC说明文档

    【故障诊断】基于matlab稀疏包络谱分析多通道数据驱动的BRB故障诊断【含Matlab源码 9922期】.mp4

    海神之光上传的视频是由对应的完整代码运行得来的,完整代码皆可运行,亲测可用,适合小白; 1、从视频里可见完整代码的内容 主函数:main.m; 调用函数:其他m文件;无需运行 运行结果效果图; 2、代码运行版本 Matlab 2019b;若运行有误,根据提示修改;若不会,私信博主; 3、运行操作步骤 步骤一:将所有文件放到Matlab的当前文件夹中; 步骤二:双击打开main.m文件; 步骤三:点击运行,等程序运行完得到结果; 4、仿真咨询 如需其他服务,可私信博主; 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作

    通过复杂的文本对齐和运动感知一致性进行内容丰富的AIGC视频质量评估

    近年来,文本驱动的视频生成 (Brooks 等人 2024;Hunyuan 2024) 取得了显著增长。然而,评估这些文本驱动的AI生成视频带来了独特且日益严峻的挑战。这些挑战主要源于两个关键问题:(1)需要精确的视频与文本对齐,特别是在处理复杂和长文本提示时;(2)出现了一些在自然生成视频中不常见的独特失真现象,例如不规则运动模式和物体。 随着新一代视频模型的发展,这些挑战变得更加突出。这些新一代模型以 Sora (Brooks 等人 2024) 的出现为标志,在生成质量上相比以往模型有了显著提升,其特点在于丰富的细节和内容,如 Kling (快手 2024) 、Gen-3-alpha (Runway 2024) 、Vidu (圣书 2024) 等。与之前的 AIGC 视频相比,这些模型支持 更长且更复杂的文本提示(通常超过200个字符),以及更复杂的运动模式和更长的持续时间(通常超过5秒,帧率为24帧每秒) 。如图 [fig:1] 所示,这些丰富的内容对评估者的理解视频动态及其与复杂文本语义关系的能力提出了更高的要求。 为了应对这一问题,我们引入了 Conten

    B站黑马程序员第二章08-字符串的三种定义方式(个人笔记)

    在B站看黑马程序员,自学python,整理的个人笔记

    传统永磁同步电机FOC离散化Simulink模型实践指南:高效性能与传递函数离散化推导文档附赠,传统永磁同步电机FOC离散化Simulink模型实战解析及传递函数离散化推导入门指南,传统永磁同步电机的

    传统永磁同步电机FOC离散化Simulink模型实践指南:高效性能与传递函数离散化推导文档附赠,传统永磁同步电机FOC离散化Simulink模型实战解析及传递函数离散化推导入门指南,传统永磁同步电机的FOC离散化simulink模型,效果较好。 附赠传递函数离散化推导的文档,初学者可以入手。 ,传统永磁同步电机; FOC离散化; Simulink模型; 传递函数离散化; 推导文档。,FOC离散化Simulink模型:永磁同步电机高效控制与传递函数离散化解析

    创业者必备:解读DeepSeek引发的AI技术与应用革新

    内容概要:本文由360集团创始人周鸿祎撰写,深入探讨了DeepSeek这一前沿AI技术及其对各行各业所带来的巨大机遇。文中详细阐述了人工智能的发展历程,特别是大模型的演进,并指出了DeepSeek如何在技术和用户体验方面取得重大突破,引领新的工业革命,以及中国在该领域的创新和发展前景。同时介绍了如何借助DeepSeek实现具体的企业应用,涵盖知识库建设、智能体开发等多个方面的实践经验。 适用人群:针对政府机构、企业和创新创业者的高级管理层和技术领导者,旨在提供对当前AI前沿技术和未来发展策略的理解。 使用场景及目标:适用于希望通过先进技术提升竞争力的单位或个人;目的在于引导读者建立正确的AI意识,了解最新的技术动向和实施路径,为未来的战略规划打下坚实的基础。 其他说明:文档还强调了在全球范围内争夺大模型主导地位的竞争环境下,中国企业应该如何抓住机遇实现快速发展,以及如何克服现有挑战,确保安全可靠的应用。

    软件测试基础(功能测试)笔记

    APP测试基础流程

    建设工程管理数字孪生平台解决方案.docx

    建设工程管理数字孪生平台解决方案.docx

    【车间调度】基于matlab沙猫群算法SCSO求解零空闲流水车间调度问题NIFSP【含Matlab源码 7974期】.mp4

    海神之光上传的视频是由对应的完整代码运行得来的,完整代码皆可运行,亲测可用,适合小白; 1、从视频里可见完整代码的内容 主函数:main.m; 调用函数:其他m文件;无需运行 运行结果效果图; 2、代码运行版本 Matlab 2019b;若运行有误,根据提示修改;若不会,私信博主; 3、运行操作步骤 步骤一:将所有文件放到Matlab的当前文件夹中; 步骤二:双击打开main.m文件; 步骤三:点击运行,等程序运行完得到结果; 4、仿真咨询 如需其他服务,可私信博主; 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作

    串口助手,可以调整串口接收数据大小,颜色文字。显示接收时间。

    串口助手

    深度学习-卷积神经网络的猫狗数据集

    深度学习-卷积神经网络的猫狗数据集

    基于Python的Django-vue社会主义核心价值观视角下电商平台型社会责任评价研究源码-演示视频.zip

    基于Python的Django-vue社会主义核心价值观视角下电商平台型社会责任评价研究源码-演示视频 项目关键技术 开发工具:Pycharm 编程语言: python 数据库: MySQL5.7+ 后端技术:Django 前端技术:HTML 关键技术:HTML、MYSQL、Python 数据库工具:Navicat、SQLyog

Global site tag (gtag.js) - Google Analytics