如何在 MODx 网格中使用 ExtJS 插件“行扩展器”

Posted

技术标签:

【中文标题】如何在 MODx 网格中使用 ExtJS 插件“行扩展器”【英文标题】:How to use ExtJS plugin 'Row Expander' with a MODx grid 【发布时间】:2014-03-20 04:32:29 【问题描述】:

我正在为 MODx Revolution 2.2.x 构建一个额外的,它使用 ExtJS 3.4 作为前端。我有一个需要使用“行扩展器”ExtJS 插件的网格,但我不确定如何将提供的示例http://dev.sencha.com/deploy/ext-3.4.0/examples/grid/grid-plugins.html(这是第一个示例网格)转换为 MODExt 语法。

我认为我的主要问题是该示例使用的是本地商店,而不是像 MODx 那样使用类模板。

这是我尝试将插件添加到的基本示例网格:

Example.grid.Artworks = function(config) 
    config = config || ;
    Ext.applyIf(config,
        id: 'example-grid-artworks'
        ,url: Example.config.connectorUrl
        ,baseParams:  action: 'mgr/example/getListArtworks' 
        ,fields: ['id','name','description','menu']
        ,paging: true
        ,pageSize: 5
        ,remoteSort: true
        ,autoExpandColumn: 'description'
        ,columns: [
            header: _('id')
            ,dataIndex: 'id'
        ,
            header: _('example.artwork_name')
            ,dataIndex: 'name'
        ,
            header: _('example.artwork_desc')
            ,dataIndex: 'name'
        ]
    );
    Example.grid.Artworks.superclass.constructor.call(this,config)

Ext.extend(Example.grid.Artworks,MODx.grid.Grid);
Ext.reg('example-grid-artworks',Example.grid.Artworks);

任何关于如何将插件与 MODx 的 connectorUrl 和 baseParams 合并的见解将不胜感激。

提前致谢。

【问题讨论】:

【参考方案1】:

好的,我设法解决了。如果其他人遇到同样的问题,我会留在这里。

Example.grid.Artworks = function(config) 
    config = config || ;

    // ---- This gets added here ------
    this.exp = new Ext.grid.RowExpander(
        tpl : new Ext.Template(
            '<p>expandedcontent</p>'
        )
    );

    Ext.applyIf(config,
        id: 'example-grid-artworks'
        ,url: Example.config.connectorUrl
        ,baseParams:  action: 'mgr/example/getListArtworks' 
        // added the expanded content field here.
        ,fields: ['id','name','description','expandedcontent','menu']
        ,paging: true
        ,pageSize: 5
        ,remoteSort: true
        ,autoExpandColumn: 'description'
        ,plugins: [this.exp] // <---- add this here
        ,columns: [this.exp, // <----- add this here
            header: _('id')
            ,dataIndex: 'id'
        ,
            header: _('example.artwork_name')
            ,dataIndex: 'name'
        ,
            header: _('example.artwork_desc')
            ,dataIndex: 'name'
        ]
    );
    Example.grid.Artworks.superclass.constructor.call(this,config)

Ext.extend(Example.grid.Artworks,MODx.grid.Grid);
Ext.reg('example-grid-artworks',Example.grid.Artworks);

【讨论】:

以上是关于如何在 MODx 网格中使用 ExtJS 插件“行扩展器”的主要内容,如果未能解决你的问题,请参考以下文章

ExtJs Grid Buffer Renderer 不显示网格行

使行扩展元素,即 extjs 网格和图表在窗口调整大小时调整大小

如何使用 ExtJS 现代 Grid Row 扩展器插件?

Extjs4:如何使用“multiSelect:true”获取网格中的所有选定行

ExtJs - 通过单击行中的相应图像来编辑网格单元格

如何在 extjs 3 网格中选择行以及如何放置过滤器