PDA

View Full Version : Gridpanel using RowExpander plugin and Checkbox Selection Model



scgrif32
6 Mar 2012, 2:43 PM
Hello All,

I never could resolve this issue in my previous version (Ext JS 3) of the application I am porting to Ext JS 4 and am now back on this issue hoping someone can help me with a work around to get the rowExpander plugin and checkbox selection model to play nicely together.

The issue is when you are using the rowExpander plugin alone the expanded content will display properly in the cell to the right of the column containing the '+' sign that is used to expand the row but if you add a checkbox selection column to the grid the content of the row that expands is no longer aligned to the right of the '+' sign used to expand the row. The content is left justified and starts over the column assigned by the checkbox selection model.

It's like the margin of the content is set to '0'. I've seen one other example of someone else using a checkbox selection model and rowExpander plugin and ironically their script contained the same issues.

Is it the order of precedence that is resulting in this discrepancy? Has anyone else ever seen this issue and if so how did you resolve it. Any help anyone can provide would be GREATLY APPRECIATED.



me.items = [{
xtype: 'panel',
layout: 'hbox',
items: [{
border: false,
flex: 1,
html: _t('reporting.myreports.heading'),
padding: '10 0 3'
}]
},{
xtype: 'sgrid',
autoScroll: true,
border: true,
columnLines: true,
id: 'myreportsgrid',
loadMask: true,
minHeight: 100,
selModel: Ext.create('Ext.selection.CheckboxModel',{checkOnly: true}),
plugins: [{
ptype: 'rowexpander',
rowBodyTpl: [
'<div class="caseReport_overview">',
'<div style="border: 0px solid #000; font-weight: bold; padding: 5px 0 5px 9px; width: 200px;"><u>Report Query Parameters</u></div>',
'<table border="0" style="border-color: #666; margin-left: 5px; width: 575px;">',
'<tbody>',
'<tr>',
'<td style="border-color: #666; font-weight: bold; text-align: right; vertical-align: bottom; width: 75px;">' + _t("reports.management.case.status") + ':</td>',
'<td style="border-color: #666; padding-left: 3px; vertical-align: bottom; width: 60px;">{case_status}</td>',
'<td style="border-color: #666; font-weight: bold; text-align: right; vertical-align: bottom; width: 70px;">' + _t("reports.management.start.date") + ':</td>',
'<td style="border-color: #666; padding-left: 3px; vertical-align: bottom;">{start_date}</td>',
'</tr>',
'<tr>',
'<td style="border-color: #666; font-weight: bold; text-align: right; vertical-align: bottom;">' + _t("reports.management.systemid") + ':</td>',
'<td style="border-color: #666; padding-left: 3px; vertical-align: bottom;">{system_ids}</td>',
'<td style="border-color: #666; font-weight: bold; text-align: right; vertical-align: bottom;">' + _t("reports.management.end.date") + ':</td>',
'<td style="border-color: #666; padding-left: 3px; vertical-align: bottom;">{end_date}</td>',
'</tr>',
'<tr>',
'<td style="border-color: #666; font-weight: bold; text-align: right; vertical-align: bottom;">' + _t("reports.management.parties") + ':</td>',
'<td style="border-color: #666; padding-left: 3px; vertical-align: bottom;" colspan="3">{parties}</td>',
'<tr>',
'</tbody>',
'</table>',
'</div>'
]
}],
store: 'CaseReports',
columns: [
{
dataIndex: 'id',
hidden: true,
renderer: this.renderText,
sortable: true,
text: _t('reporting.grid.id'),
width: 30
}, {
dataIndex: 'report_name',
flex: 1,
sortable: true,
text: _t('reporting.grid.reportName')
}, {
dataIndex: 'file_name',
hidden: true,
sortable: true,
text: _t('reporting.grid.filename'),
width: 200
}, {
dataIndex: 'date_requested',
renderer: this.renderDate,
sortable: true,
text: _t('reporting.grid.requested'),
width: 195
}, {
dataIndex: 'report_status',
renderer: this.renderText,
sortable: true,
text: _t('reporting.grid.reportStatus'),
width: 80
}
],
emptyText: '<div style="font-size: 11px; font-weight: bold; padding: 5px 0px; text-align: center;">' + _t('reporting.grid.noreports.available') + '</div>',
dockedItems: [{
xtype: 'toolbar',
items: [{
disabled: true,
action: 'deleteReport',
icon: SC.Url.image('delete.gif'),
text: _t('reporting.grid.removeReports.btn.text'),
tooltip: _t('reporting.grid.removeReports.btn.tooltip')
}, '->', { // begin using the right-justified button container
iconCls: 'x-tbar-loading',
action: 'refresh',
tooltip: _t('reporting.grid.refresh.tooltip')
}]
}]
}];


Thanks,

Shawn

mitchellsimoens
7 Mar 2012, 9:41 AM
With CSS, add margin-left to the div.x-grid-cell-rowbody


div.x-grid-cell-rowbody {
marging-left : 50px;
}

This worked for me using 4.1.0 beta3 and Chrome.

scgrif32
7 Mar 2012, 9:48 AM
Mitchell,

Thank you for responding. I came up with a solution last night and was going to respond to this post with my work around this morning but you responded before I could post my reply to my thread. I wrapped my rowexpander content inside of a div element and assigned margin-left: 50px to that div. It does seem the div element (x-grid-cell-rowbody) loses it's defined styles once you add the Checkbox selection model.

Would this be considered a bug?

Thank you for quickly getting back to me.

- Shawn

mitchellsimoens
7 Mar 2012, 9:50 AM
If you use a CSS class that is used then it will reflect just fine.

scgrif32
7 Mar 2012, 10:23 AM
Mitchell,

We are using an MVC application model for this project and directly impacting the CSS for this div element would impact all grids using the rowexpander plugin. The main question is "why" does the this style get impacted by using the checkbox selection model and rowexpander plugin at the same time?


div.x-grid-cell-rowbody {
marging-left : 50px;
}

The solution I implemented works for what I had to figure out given my page is the only one using both together. Unless you know of another solution that would not impact all grids using the rowexpander plugin we can close this post.

Thanks again,

Shawn

mitchellsimoens
7 Mar 2012, 10:29 AM
You can then set the cls config on the grids you want to only affect

scgrif32
7 Mar 2012, 11:54 AM
Probably a really simple thing to figure out but I haven't seen any Ext Js examples defining more than a CSS declaration name (i.e. cls: "folder"). How would I set the grids "cls" config for the specific style in question along with the modification it's CSS declarations?

Thanks,

Shawn

sumit_bnglr
25 Sep 2012, 10:19 PM
I am too getting a hard time with this. Thanks to Shawn for that css suggestion, but it appears to be a temporary solution. There is 1 more issue I am facing with this, which is the colspan of the child grid, it's being set 1 less than the required one and causing inner grid aligned improperly.

Please let me know if you guys have a fix for that.


Thanks,
Sumit

Chico.Lau
2 Oct 2012, 10:54 PM
The collspan breaks is when also using CheckboxModel.
Check out getRowBodyFeatureData, you'll see the collspan being set there.
Look for this line: o.rowBodyColspan = o.rowBodyColspan - 1;