Как добавить панель в extjs Grid Panel в rowBody

Я не хочу добавлять панель ext вместо html в панель сетки ext. То, что у меня есть прямо сейчас, это:

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 я хотел бы включить стандартную панель, чтобы я мог добавлять кнопки и другой макет.

Это возможно?


extjs gridpanel
person Giancarlo Corzo    schedule 22.06.2012    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Я использую ExtJS 4.2, чтобы заставить его работать, код контроллера выглядит так:

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

person Tom    schedule 10.04.2013

arrow_upward
0
arrow_downward

Вот что я сделал, чтобы заменить rowBody пользовательской панелью.

На мой взгляд, я создаю это:

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

В моем контроллере я добавил прослушиватель расширения тела следующим образом:

 '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 для определения компонента для рендеринга с этим идентификатором.

person Giancarlo Corzo    schedule 18.07.2012