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

extjs rowexpander 通过给expander 添加expand函数,来控制显示

阅读更多

var d = new Ext.grid.RowExpander({
         tpl : new Ext.XTemplate(
         '<div class="detailData">',
         '1212',
         '</div>'
         )
         });
    //这里是添加监听
    d.on("expand",function(    d,r,body,rowIndex){

       var f = r.data;
       alert(f);
       alert(f.sky.name);
       //查找 grid
        window.testEle=body;
        alert(r.json[3]);
       alert(body.id);
       if (Ext.DomQuery.select("div.x-panel-bwrap",body).length==0){
          //alert("a");
          var data=r.json[3];
    //测试使用内存数据,可以用url取远程数据或者ajax
          var store=new Ext.data.SimpleStore({
                fields: ["class","degrade"]
                ,data:data
              });
          var cm = new Ext.grid.ColumnModel([
          {header: "科目",dataIndex: 'class',width: 130,hideable:false,sortable:false,resizable:true}
          ,{header: "成绩",dataIndex: 'degrade',width: 130,hideable:false,sortable:false,resizable:true}
           ]);
           Ext.DomQuery.select("div.detailData")[0];
       var grid = new Ext.grid.GridPanel(
       {
         store:store,
         cm:cm,
         renderTo:Ext.DomQuery.select("div.detailData",body)[0],
         autoWidth:true,
         autoHeight:true
         }
       );
      
       }
    });

 

 

//rowexpander.js

 

Ext.grid.RowExpander = function(config){
      Ext.apply(this, config);

      this.addEvents({
         beforeexpand : true,
         expand: true,
         beforecollapse: true,
         collapse: true
      });

      Ext.grid.RowExpander.superclass.constructor.call(this);

      if(this.tpl){
         if(typeof this.tpl == 'string'){
            this.tpl = new Ext.Template(this.tpl);
         }
         this.tpl.compile();
      }

      this.state = {};
      this.bodyContent = {};
   };

   Ext.extend(Ext.grid.RowExpander, Ext.util.Observable, {
      header: "",
      width: 20,
      sortable: false,
      fixed:true,
      menuDisabled:true,
      dataIndex: '',
      id: 'expander',
      lazyRender : true,
      enableCaching: true,

      getRowClass : function(record, rowIndex, p, ds){
         p.cols = p.cols-1;
         var content = this.bodyContent[record.id];
         if(!content && !this.lazyRender){
            content = this.getBodyContent(record, rowIndex);
         }
         if(content){
            p.body = content;
         }
         return this.state[record.id] ? 'x-grid3-row-expanded' : 'x-grid3-row-collapsed';
      },

      init : function(grid){
         this.grid = grid;

         var view = grid.getView();
         view.getRowClass = this.getRowClass.createDelegate(this);

         view.enableRowBody = true;

         grid.on('render', function(){
            view.mainBody.on('mousedown', this.onMouseDown, this);
         }, this);
      },

      getBodyContent : function(record, index){
         if(!this.enableCaching){
            return this.tpl.apply(record.data);
         }
         var content = this.bodyContent[record.id];
         if(!content){
            content = this.tpl.apply(record.data);
            this.bodyContent[record.id] = content;
         }
         return content;
      },

      onMouseDown : function(e, t){
         if(t.className == 'x-grid3-row-expander'){
            e.stopEvent();
            var row = e.getTarget('.x-grid3-row');
            this.toggleRow(row);
         }
      },

      renderer : function(v, p, record){
         p.cellAttr = 'rowspan="2"';
         return '<div class="x-grid3-row-expander">&#160;</div>';
      },

      beforeExpand : function(record, body, rowIndex){
         if(this.fireEvent('beforeexpand', this, record, body, rowIndex) !== false){
            if(this.tpl && this.lazyRender){
               body.innerHTML = this.getBodyContent(record, rowIndex);
            }
            return true;
         }else{
            return false;
         }
      },

      toggleRow : function(row){
         if(typeof row == 'number'){
            row = this.grid.view.getRow(row);
         }
         this[Ext.fly(row).hasClass('x-grid3-row-collapsed') ? 'expandRow' : 'collapseRow'](row);
      },

      expandRow : function(row){
         if(typeof row == 'number'){
            row = this.grid.view.getRow(row);
         }
         var record = this.grid.store.getAt(row.rowIndex);
         var body = Ext.DomQuery.selectNode('tr:nth(2) div.x-grid3-row-body', row);
         if(this.beforeExpand(record, body, row.rowIndex)){
            this.state[record.id] = true;
            Ext.fly(row).replaceClass('x-grid3-row-collapsed', 'x-grid3-row-expanded');
            this.fireEvent('expand', this, record, body, row.rowIndex);
         }
      },

      collapseRow : function(row){
         if(typeof row == 'number'){
            row = this.grid.view.getRow(row);
         }
         var record = this.grid.store.getAt(row.rowIndex);
         var body = Ext.fly(row).child('tr:nth(1) div.x-grid3-row-body', true);
         if(this.fireEvent('beforcollapse', this, record, body, row.rowIndex) !== false){
            this.state[record.id] = false;
            Ext.fly(row).replaceClass('x-grid3-row-expanded', 'x-grid3-row-collapsed');
            this.fireEvent('collapse', this, record, body, row.rowIndex);
         }
      }
   });

分享到:
评论

相关推荐

    EXTJS单元格变色、行变色

    在EXTJS中,单元格变色可以通过renderer函数来实现。renderer函数是Grid Panel中 columns配置项的一个属性,用于格式化单元格的内容。在上面的代码中,我们可以看到,renderer函数fnColumnColor被应用于“人员名称”...

    ExtJs 动态添加表单

    在ExtJS中,我们可以使用`Ext.container.Container`类来创建一个容器,然后设置布局为`form`,以便容纳表单字段。例如: ```javascript var formPanel = Ext.create('Ext.form.Panel', { layout: 'form', items...

    Extjs中RowExpander控件的默认展开问题示例探讨

    在Extjs中,RowExpander通常是通过在GridPanel中添加一个插件来实现的。例如,在一个Ext.grid.Panel的配置中,可以添加一个plugins属性,其值为一个RowExpander的实例。 其次,要实现特定行的默认展开,需要在...

    extjs 进度条的显示

    一旦进度条对话框被创建,可以通过调用`updateProgress()`方法来更新其显示的进度。这个方法接受三个参数:当前进度值(0到1之间)、进度文本以及可选的额外消息。例如: ```javascript progressBar.updateProgress...

    extjs加水印

    为了添加水印,我们需要创建一个新的组件或者扩展已有的组件,例如表格或图像查看器,使其在显示时自动添加水印。这通常通过在组件的渲染过程中插入CSS层或者动态生成图片来完成。水印可以是文本形式,如“机密”、...

    Extjs 4.11 重写 Panel 添加 click事件

    开发者可以为这些事件添加监听器来执行特定的函数。 要为Panel添加`click`事件,我们需要遵循以下步骤: 1. **创建Panel实例**:首先,创建一个Panel实例,定义其配置属性,如标题、宽度、高度等。例如: ```...

    ext RowExpander 内 加载组件

    在RowExpander组件中,你可以利用这些工具来定制扩展行为,例如添加动画效果、改变展开状态的回调函数等。 在实际项目中,"RowExpander.js"可能包含了EXTJS RowExpander组件的实现或扩展。通过分析这个文件,你可以...

    ExtJs的resultGrids中动态添加按钮

    动态添加按钮在很多情况下非常有用,比如在表格数据加载后根据特定条件显示或隐藏操作按钮,或者根据用户权限控制按钮的显示。在ExtJS中,我们可以利用`grid`的`column`配置和`actionColumn`来实现这一功能。 首先...

    给Extjs的GridPanel增加“合计”行

    总结来说,EXTJS的GridPanel添加“合计”行涉及到View的自定义、数据计算、模板创建、DOM操作以及样式调整等多个环节。通过以上步骤,我们可以实现一个动态更新且具有美观样式的“合计”行。这不仅增强了数据展示的...

    Extjs折叠布局中添加树

    通过这个示例,我们可以了解到如何在ExtJS的折叠布局中集成树形结构,以及如何从服务器动态加载数据来构建这个树。这在实现具有层次结构的导航菜单或信息分类时非常有用。同时,我们也学习到了如何创建和配置不同的...

    extJs3升级extjs4方案

    ExtJS3 升级到 ExtJS4 方案 ...可以看到,ExtJS4 使用 Ext.create 函数来创建组件类,这样可以更加方便地创建组件。 ExtJS3 升级到 ExtJS4 需要修改大量代码,需要我们重新学习和适应 ExtJS4 的新特性和变化。

    extjs 的权限问题 要求控制的对象是 菜单,按钮,URL

    其次,另一个解题思路是通过服务器端返回的数据来控制客户端的菜单显示。通过这种方式,服务器端可以控制哪些菜单项或者按钮应当显示给当前登录的用户。具体实现时,可以在初始化主页面时通过Ext.tree.TreeLoader...

    Extjs 重写Panel添加click事件

    我们可以通过配置对象来设置Panel的各种属性,如title、width、height等。当涉及到事件监听时,我们可以利用Ext JS的事件系统来实现。 点击事件(click event)是用户与UI交互的常见行为,常用于触发某些操作。在...

    ExtJS 使用grid显示数据

    5. **渲染器(Renderer)**:自定义单元格内容的显示方式,通过配置column的renderer函数,可以格式化数据显示,如日期、货币等。 6. **事件监听**:Grid支持多种用户交互事件,如itemclick、celledit等,可以绑定...

    ExtJs表格grid中文排序函数方法

    今天,我们将详细介绍如何使用ExtJs实现中文排序,特别是使用Ext.data.Store.prototype.createComparator()函数来实现中文排序。 首先,让我们来了解 Ext.data.Store.prototype.createComparator()函数的作用。这个...

    extjs htmleditor 图片上传和添加网络图片编辑器

    这个主题主要关注如何在ExtJS的HTMLEditor中实现图片的上传和添加网络图片功能。 首先,理解ExtJS HTMLEditor的基本结构和工作原理是至关重要的。HTMLEditor是一个组件,它可以将HTML代码作为输入,并提供类似于...

    Extjs4添加tooltip

    Extjs4的textfield控件竟然没有tooltip悬浮提示,这应该算是个bug吧。网上查了很多,也没有方案。后来自己通过查询并整理出这个方案,终于实现了。 思想如下: 在textfield渲染时注册mouseover事件,然后在其中调用...

    Extjs4 treePanel节点刷新JS函数

    完美的Extjs4 treePanel节点刷新,函数为自动刷新选中的节点.API看得头疼才别出来的代码.截止我发之前,好像没有谁共享这个功能的函数吧.

    在vs2008中添加对extjs的智能提示

    ### 在VS 2008中为ExtJS添加智能提示的方法 #### 一、背景介绍与准备工作 在软件开发过程中,提升开发效率是每个开发者所追求的目标之一。Visual Studio 2008作为一款功能强大的集成开发环境(IDE),虽然其主要支持...

Global site tag (gtag.js) - Google Analytics