`
yxc_gdut
  • 浏览: 97621 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

将RowExpander的template换成Gridpanel

EXT 
阅读更多



 

 在RowExpander基础上 加入div id为record的id 再将grid render('record.id')

 

 

/*!
* Ext JS Library 3.3.0
* Copyright(c) 2006-2010 Ext JS, Inc.
* licensing@extjs.com
* http://www.extjs.com/license
*/
Ext.ns('Ext.ux.grid');

/**
* @class Ext.ux.grid.RowExpander
* @extends Ext.util.Observable
* Plugin (ptype = 'rowexpander') that adds the ability to have a Column in a grid which enables
* a second row body which expands/contracts.  The expand/contract behavior is configurable to react
* on clicking of the column, double click of the row, and/or hitting enter while a row is selected.
*
* @ptype rowexpander
*/
Ext.ux.grid.RowExpander = Ext.extend(Ext.util.Observable, {
    /**
     * @cfg {Boolean} expandOnEnter
     * <tt>true</tt> to toggle selected row(s) between expanded/collapsed when the enter
     * key is pressed (defaults to <tt>true</tt>).
     */
    expandOnEnter : true,
    /**
     * @cfg {Boolean} expandOnDblClick
     * <tt>true</tt> to toggle a row between expanded/collapsed when double clicked
     * (defaults to <tt>true</tt>).
     */
    expandOnDblClick : true,

    header : '',
    width : 20,
    sortable : false,
    fixed : true,
    hideable: false,
    menuDisabled : true,
    dataIndex : '',
    id : 'expander',
    lazyRender : true,
    enableCaching : true,

    constructor: function(config){
        Ext.apply(this, config);

        this.addEvents({
            /**
             * @event beforeexpand
             * Fires before the row expands. Have the listener return false to prevent the row from expanding.
             * @param {Object} this RowExpander object.
             * @param {Object} Ext.data.Record Record for the selected row.
             * @param {Object} body body element for the secondary row.
             * @param {Number} rowIndex The current row index.
             */
            beforeexpand: true,
            /**
             * @event expand
             * Fires after the row expands.
             * @param {Object} this RowExpander object.
             * @param {Object} Ext.data.Record Record for the selected row.
             * @param {Object} body body element for the secondary row.
             * @param {Number} rowIndex The current row index.
             */
            expand: true,
            /**
             * @event beforecollapse
             * Fires before the row collapses. Have the listener return false to prevent the row from collapsing.
             * @param {Object} this RowExpander object.
             * @param {Object} Ext.data.Record Record for the selected row.
             * @param {Object} body body element for the secondary row.
             * @param {Number} rowIndex The current row index.
             */
            beforecollapse: true,
            /**
             * @event collapse
             * Fires after the row collapses.
             * @param {Object} this RowExpander object.
             * @param {Object} Ext.data.Record Record for the selected row.
             * @param {Object} body body element for the secondary row.
             * @param {Number} rowIndex The current row index.
             */
            collapse: true
        });

        Ext.ux.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 = {};
    },

    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', this.onRender, this);
        grid.on('destroy', this.onDestroy, this);
    },

    // @private
    onRender: function() {
        var grid = this.grid;
        var mainBody = grid.getView().mainBody;
        mainBody.on('mousedown', this.onMouseDown, this, {delegate: '.x-grid3-row-expander'});
        if (this.expandOnEnter) {
            this.keyNav = new Ext.KeyNav(this.grid.getGridEl(), {
                'enter' : this.onEnter,
                scope: this
            });
        }
        if (this.expandOnDblClick) {
            grid.on('rowdblclick', this.onRowDblClick, this);
        }
    },
   
    // @private   
    onDestroy: function() {
        if(this.keyNav){
            this.keyNav.disable();
            delete this.keyNav;
        }
        /*
         * A majority of the time, the plugin will be destroyed along with the grid,
         * which means the mainBody won't be available. On the off chance that the plugin
         * isn't destroyed with the grid, take care of removing the listener.
         */
        var mainBody = this.grid.getView().mainBody;
        if(mainBody){
            mainBody.un('mousedown', this.onMouseDown, this);
        }
    },
    // @private
    onRowDblClick: function(grid, rowIdx, e) {
        this.toggleRow(rowIdx);
    },

    onEnter: function(e) {
        var g = this.grid;
        var sm = g.getSelectionModel();
        var sels = sm.getSelections();
        for (var i = 0, len = sels.length; i < len; i++) {
            var rowIdx = g.getStore().indexOf(sels[i]);
            this.toggleRow(rowIdx);
        }
    },

    getBodyContent : function(record, index){
        if(!this.enableCaching){
            return this.rowExpandergrid;
        }
        var content = this.bodyContent[record.id];
        if(!content){
            content = new Ext.grid.GridPanel({
                title:'test',
                height:100,
                ds:new Ext.data.JsonStore({
                url:'*',
                fields:["Company","Price","test"]
                }),
                frame:true,
                columns: [
        {header: "Company", width: 200, sortable: true, dataIndex: 'company'},
        {header: "Price", width: 120, sortable: true, dataIndex: 'price'},
{header: "test"}
],
listeners:{
render:function(){//每次都触发render事件
alert(this.getId());
},
hide:function(){
alert("hide");
}
}
                });
            this.bodyContent[record.id] = content;
        }
        return content;
    },

    onMouseDown : function(e, t){
        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.rowExpandergrid && this.lazyRender){
            var content = this.bodyContent[record.id];
            if(!content){
            body.innerHTML = '<div id='+record.id+'></div>';
            content = new Ext.grid.GridPanel({
                title:'test',
                height:100,
                ds:new Ext.data.JsonStore({
                url:'*',
                fields:["Company","Price","test"]
                }),
                frame:true,
                columns: [
        {header: "Company", width: 200, sortable: true, dataIndex: 'company'},
        {header: "Price", width: 120, sortable: true, dataIndex: 'price'},
{header: "test"}
],
listeners:{
render:function(){//每次都触发render事件
alert(this.getId());
},
hide:function(){
alert("hide");
}
}
                }).render(record.id);
            this.bodyContent[record.id] = body.innerHTML;//保存当前行的html代码
        }else{
                body.innerHTML = content;//取出之前保存的html代码 并显示
        }
            }
            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('beforecollapse', 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);
        }
    }
});

Ext.preg('rowexpander', Ext.ux.grid.RowExpander);

//backwards compat
Ext.grid.RowExpander = Ext.ux.grid.RowExpander;

 新建一个js文件 把官方例子中替换RowExpander.js就可以看到效果了,写得太菜,没有考虑到怎么方便应用 因为我还没把grid于它脱离

 

 

  • 大小: 9.8 KB
  • 大小: 8.2 KB
分享到:
评论

相关推荐

    Ext实现GridPanel内嵌行内嵌表格(RowExpander)

    在本文中,我们将深入探讨如何使用ExtJS库中的RowExpander插件来实现在GridPanel中内嵌行内的表格。ExtJS是一个强大的JavaScript框架,它提供了丰富的组件和功能,用于构建复杂的Web应用程序。RowExpander插件是...

    EXTJSEXT实例GridPanel.

    4. **GridPanel**: 最后,创建GridPanel本身,将Store和ColumnModel作为参数传递。 ```javascript var grid = new Ext.grid.GridPanel({ store: store, cm: cm, renderTo: Ext.getBody() // 渲染到页面的body...

    ext.net 动态创建gridpanel

    在这个场景中,我们将深入探讨如何使用Ext.NET代码动态创建GridPanel,并在各种窗口中灵活展示。 1. **动态创建GridPanel**: 在Ext.NET中,动态创建GridPanel意味着在运行时根据需要生成组件。这通常涉及到在...

    gridpanel常用操作

    在本文中,我们将深入探讨`GridPanel`在Extnet框架中的常见操作,包括选择行、前后台方法调用、增删行以及弹出窗体的实现方式。这些操作是开发Web应用程序时处理数据表单和数据展示的关键部分。 首先,我们来看如何...

    gridPanel添加按钮

    例如,在ExtJS中,我们可以创建一个新的`Ext.toolbar.Toolbar`实例,并将其附加到`gridPanel`的顶部或底部。 ```javascript var toolbar = Ext.create('Ext.toolbar.Toolbar', { dock: 'top', // 或者 'bottom' ...

    给Extjs的GridPanel增加“合计”行

    这篇博文“给Extjs的GridPanel增加‘合计’行”将指导我们如何实现这一功能。 首先,我们需要理解EXTJS的GridPanel结构。GridPanel由Store(数据存储)、ColumnModel(列模型)和View(视图)等主要部分组成。在...

    Extjs入门教程(treePanel和GridPanel)

    在集成TreePanel和GridPanel时,可能涉及到的概念有:将TreePanel的节点与GridPanel的数据关联,实现点击树节点时动态加载或更新GridPanel的数据,以及可能的父子数据联动操作。 在实际应用中,你可能会学习到以下...

    扩展GridPanel

    扩展的GridPanel,让其分页后保持选择状态

    Ext的gridpanel控件二次加载问题

    在初次创建GridPanel时,我们可以将其赋值给一个全局变量,比如`var myGrid;`。然后在需要重新加载数据时,而不是重新创建整个GridPanel,我们只需要调用`myGrid.reconfigure()`或`myGrid.store.loadData()`方法,...

    ExtJS的GridPanel导出excel文件

    ExtJS的GridPanel导出excel文件,方便快捷易懂!

    ExtJs GridPanel双击事件获得双击的行

    本篇文章将深入讲解如何在ExtJs GridPanel中实现双击事件,并获取双击的行以及选中的复选框状态。 首先,我们要了解GridPanel的基本结构。GridPanel由Store(数据存储)和ColumnModel(列模型)组成,它们定义了...

    GridPanel中的单元格不能选中复制的解决方法

    Ext.grid.GridView.prototype.templates.cell = new Ext.Template( '&lt;td class="x-grid3-col x-grid3-cell x-grid3-td-{id} x-selectable {css}" style="{style}" tabIndex="0" {cellAttr}&gt;', '...

    Ext GridPanel 中实现加链接操作

    本文将详细介绍如何在 Ext GridPanel 中实现加链接操作,包括基本原理、代码实现及注意事项。 #### 一、Ext GridPanel 基础 在了解如何添加链接之前,我们首先需要理解 Ext GridPanel 的基本结构。Ext GridPanel ...

    Ext.grid.GridPanel 删除线

    Ext.grid.GridPanel 删除线 放到example文件夹下运行

    Gridpanel多表头的扩展

    多表头在EXTJS 2.2版本中被引入,提供了更灵活的列结构,允许用户将列分为多个层次,每个层次可以有自己的表头,这样的设计在显示有复杂关系的数据时非常有用。例如,我们可以创建一个表头来表示部门,然后在下一级...

    改变gridpanel的行颜色

    本文将详细介绍如何通过不同的方法来实现这一功能,包括在加载数据时改变列的颜色、加载数据后改变行的颜色以及使用ExtJS内置的颜色渲染效果。 #### 第一种情况:加载数据时改变列的颜色 当数据被加载到GridPanel...

    ExtJS 表格面板GridPanel完整例子

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

    ExtJs GridPanel 操作

    在本文中,我们将深入探讨GridPanel的操作,包括其功能、配置选项以及如何扩展GridPanel以满足复杂需求。 首先,GridPanel是用于显示表格数据的组件,它可以与Ext.data.Store配合使用,Store负责加载和管理数据。...

    ExtJS介绍以及GridPanel

    4. 实例化GridPanel:配置GridPanel的各种属性,如高度、宽度、是否可拖动列等,然后将Store和ColumnModel传递给GridPanel。 5. 渲染GridPanel:将GridPanel添加到容器中,完成渲染。 在实际应用中,GridPanel还...

Global site tag (gtag.js) - Google Analytics