如何将面板添加到 rowBody 中的 extjs 网格面板

Posted

技术标签:

【中文标题】如何将面板添加到 rowBody 中的 extjs 网格面板【英文标题】:How to add a panel to extjs Grid Panel in rowBody 【发布时间】:2012-06-22 19:08:51 【问题描述】:

我不想在 ext 网格面板中添加 ext 面板而不是 html。我现在拥有的是这样的:

features: [
    ftype: 'rowbody',
    getAdditionalData: function (data, rowIndex, record, orig) 
        var headerCt = this.view.headerCt,
            colspan = headerCt.getColumnCount();
        // Usually you would style the my-body-class in CSS file
        return 
            rowBody: '<div style="padding: 1em">' + record.get("description") + '</div>',
            rowBodyCls: "my-body-class",
            rowBodyColspan: colspan
        ;
    
],

但我希望包含一个标准面板,而不是 rowBody,以便我可以添加按钮和其他布局。

这可能吗?

【问题讨论】:

【参考方案1】:

我使用的是 ExtJS 4.2,为了让它工作,Controller 代码如下所示:

Ext.define('My.controller.MyController1', 
extend: 'Ext.app.Controller',

onGridPanelExpandbody: function(rowNode, record, expandRow, eOpts) 
    var id = 'group-row-' + record.get('Id');
    var tpl = new Ext.XTemplate('<tpl foreach=".">',
                                '<p> #.$ - .</p>', 
                                '</tpl>');
    var el = document.getElementById(id);
    tpl.overwrite(el,record.data);
,

init: function(application) 
    this.control(
        "gridpanel[itemid='usergroupsList'] tableview": 
            expandbody: this.onGridpanelExpandbody
        ,
    );
,

注意区别,你的grid,我的代码是gridpanel tableview

【讨论】:

【参考方案2】:

这就是我用自定义面板替换 rowBody 所做的工作

在我看来,我创建了这个:

plugins: [
    ptype: 'rowexpander',
    rowBodyTpl : ['<div id="group-row-groupId"> </div>']
]

在我的控制器中,我添加了一个如下所示的 expandbody 侦听器:

 'myList grid[itemid = usergroupsList]' : 
    select: this.onSelect,
    expandbody: this.onExpandBody
 

和 onExpandBody

onExpandBody: function(rowNode, record, expandRow)                 
    var row = 'group-row-' + record.get('groupId');
    var elem = document.getElementById(row);
    elem.innerHTML = '';
    var innerPanel = Ext.widget('panel',                
        html: '<p>'+record.get('description')+'</p>',
        height: 100,
        flex: 1,
        border:0
        ]
    );
    innerPanel.render(row);

您可以使用 xTemplate 定义一个组件来渲染到此 id,而不是每次都创建面板。

【讨论】:

以上是关于如何将面板添加到 rowBody 中的 extjs 网格面板的主要内容,如果未能解决你的问题,请参考以下文章

Extjs mvc 将记录添加到网格面板

将帮助按钮添加到 Extjs 网格面板标题

在编辑主网格行时,rowBody 刷新丢失内部网格。 extjs 3..我可以重新渲染内部网格..吗?

ExtJS 将面板添加到面板

以编程方式将记录添加到 ExtJS 中的网格后切换单元格编辑器

如何使用添加方法 Extjs 组件到另一个 Extjs 组件(moderntoolkit)