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

Ext Rowexpander分页样式错乱的解决办法

阅读更多


Ext RowExpander双表头总结:


使用Ext RowExpander双表头出现的问题:




 


  1. 引起的原因,ext-all.css里有一段css布局引起:

    table-layout:fixed;

     

  2. 解决办法:

    Extdemo在定义expander对象的写法:

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


            tpl : new Ext.Template(


'<div class="childGrid">',


                '',


                '</div>'


             ),


            expandOnEnter : true


        });


 


下面是我自己的写法,在定义div的时候,外面包了一个table:


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


            tpl : new Ext.Template(


'<table id="childTable"><tr><td><div class="childGrid">',


                '',


                '</div></td></tr></table>'


             ),


            expandOnEnter : true


        });


然后再页面上在加一段css,如下:


 


      <style type="text/css">


       #childTable table{


           table-layout : auto;


       }


</style>


在刷新页面,子表格分页工具栏正常了,如下图:




 


 


  1. 子表格选中,父表格也会随着选中,但是实际当中我们是不希望这种情况出现的,解决办法如下:


//阻断子表格传递事件给父表格


     childGrid.grid.afterMethod("processEvent",function(n,e){


         e.stopPropagation();


});


  • 大小: 50.8 KB
  • 大小: 68 KB
分享到:
评论

相关推荐

    ext RowExpander 内 加载组件

    在本主题中,我们将深入探讨“ext RowExpander”这一功能,它是一种增强EXTJS表格视图的强大工具,用于在表格行内添加可展开的区域,以显示更详细的信息。EXTJS是一个流行的JavaScript UI框架,提供了丰富的组件和...

    EXT分页工具条

    总的来说,EXT分页工具条是EXT框架中的一个重要组成部分,它为Web应用提供了一种高效、直观的分页解决方案。通过熟练掌握EXT分页工具条的使用,开发者能够更好地构建用户友好的数据展示界面。同时,了解其内部工作...

    Ext grid 分页实例源码

    Ext grid PagingToolbar分页实例源码Ext grid PagingToolbar分页实例源码Ext grid PagingToolbar分页实例源码Ext grid PagingToolbar分页实例源码

    ext tree 分页

    在EXT JS框架中,"ext tree 分页"是一种优化技术,用于处理大量数据时避免页面卡顿的问题。在EXT JS的树形组件(TreePanel)中,如果一次性加载所有节点,特别是当树结构非常深或者节点数量巨大时,不仅会消耗大量...

    Ext 本地分页PagingStore.js

    可以直接在本地对数据进行分页显示,很强大!!!!(分页可以是JSON格式 也可以是Array格式)

    Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法

    在Ext JS库中,`Ext.grid.plugin.RowExpander`是一个扩展插件,用于在网格行中添加可展开的详情区域。在Ext4.2版本中,用户可能遇到一个特定的问题,即`RowExpander`的`collapsebody`和`expandbody`事件无法正常触发...

    Ext实现分页查询,前台

    本示例主要介绍了如何使用Ext.js这个JavaScript框架来实现前端的分页查询功能。 首先,创建一个名为`resource`的数据存储(Store),它负责从服务器获取数据。这里的`Store`对象定义了字段(fields)、数据源URL...

    ext grid json分页显示

    本例中提到的解决方案是利用DWR(Direct Web Remoting)和EXT.js库来实现。下面将详细阐述这个知识点。 EXT.js是一个强大的JavaScript库,用于构建富客户端应用。EXT Grid是EXT.js库中的一个组件,它提供了数据表格...

    Ext4.0分页的Grid例子

    后台使用的是struts2生成Ext所需要的json,把webroot下的ext4下面加入ext的开发包,然后再把create.sql中的脚本在数据库中执行,代码就可以跑起来了,我用的是mysql数据库

    ext分页客户端demo Java js

    在这个"ext分页客户端demo Java js"的示例中,我们将探讨EXTJS如何实现客户端分页,以及如何与后端(如Java)进行数据交互,而无需在服务器端编写额外的Java代码。 EXTJS中的分页组件主要由Ext.grid.Panel和Ext....

    简单的小例子Ext+servlet 分页

    本示例探讨了如何结合Ext JS(一个强大的JavaScript框架)和Servlet(Java Web开发中的服务器端组件)来实现简单的分页功能。下面将详细解释这个主题。 首先,Ext JS是一个用于构建用户界面的前端JavaScript库,它...

    EXT树表分页(SERVLET)

    在EXT TreeGrid中,分页请求通常是通过Store的load方法触发的。 7. **部署与运行**:将开发完成的EXT应用程序(包括HTML、JavaScript、CSS文件等)和Servlet部署到服务器上,配置好Web应用容器(如Tomcat),确保...

    12种Ext的皮肤样式

    ExtJS是一个广泛使用的...综上所述,"12种Ext的皮肤样式"涵盖了ExtJS中皮肤应用的多样性,通过理解皮肤的概念、结构、应用方法以及自定义和维护皮肤的最佳实践,开发者能够轻松地为自己的ExtJS应用增添独特的视觉风格。

    Ext前台分页

    本篇文章将详细讲解基于Ext JS框架实现前台分页的原理和方法。 首先,理解“前台分页”概念。前台分页指的是在客户端,即用户的浏览器端进行数据的分页处理,而不是在服务器端。这种方式的优点是减少了服务器的负载...

    ext css 样式 精美样式

    EXT CSS样式库是一种用于增强Web应用程序用户界面的前端框架,主要应用于EXT JS库。EXT JS是一个基于JavaScript的组件化开发框架,广泛用于构建富互联网应用(RIA)。在EXT JS中,CSS样式对于创建美观且功能丰富的...

    ext TreeGrid分页可编辑

    ### 关于Ext TreeGrid分页与可编辑功能的实现 #### 一、背景与目标 在Web应用开发中,特别是涉及到复杂数据展示的应用场景中,`Ext TreeGrid`是一种非常实用且灵活的数据展示组件,它结合了树形结构与表格的形式来...

    EXT2.0动态树,分页!

    在“EXT2.0动态树,分页!”这个项目中,我们可以看到EXT2.0如何被用来创建一个后台管理系统的动态树结构,并结合了分页功能,以提高用户体验和系统性能。 动态树结构是EXT2.0中的一个重要特性,它允许用户交互地...

    ext4 表格分页实例代码

    EXT JS中的表格分页通常通过Grid Panel组件实现,该组件可以与数据存储(Store)配合,数据存储负责管理数据,包括加载、过滤、排序和分页。分页功能由Pager Toolbar组件提供,它是一个可自定义的工具栏,包含导航...

    ext分页查询ext分页查询ext分页查询ext分页查询ext分页查询

    4. **Ajax请求**:在示例代码中,使用`Ext.Ajax.request`或者`FormPanel`的`submit`方法发送异步请求到服务器。在请求参数中,除了查询条件,还需要提供分页信息。成功响应后,数据通常以JSON格式返回,然后解析并...

    Ext前台分页(页面分页)

    实现前台分页的扩展文件(来源于网络) 博文链接:https://simplehumn.iteye.com/blog/552702

Global site tag (gtag.js) - Google Analytics